react native 中View組件中的ref屬性是什麼

在用Reactnative寫工程時，預設奇妙的有一種像OC中，或者Java 中或者當前類的私有屬性的想法，state 和props都不能滿足時，就是ref 它能達到其他語言中持有一個view組件，並且局部的刷新 ref 接受值為string類型的參數或者一個函數function 需要提醒大家的是，只 ...

在用Reactnative寫工程時，預設奇妙的有一種像OC中，或者Java 中或者當前類的私有屬性的想法，state 和props都不能滿足時，就是ref

它能達到其他語言中持有一個view組件，並且局部的刷新

ref 接受值為string類型的參數或者一個函數function

callback。這一特性讓開發者對ref的使用更加靈活。
render() {
    return <TextInput ref={(c) => this._input = c} />;
  },
  componentDidMount() {
    this._input.focus();
  },

    1
    2
    3
    4
    5
    6
    7

    1
    2
    3
    4
    5
    6
    7

render(){
    return <View ref={ (e) => this._view = e } />//將組件view作為參數賦值給了this._view
}
componentDidMount(){
    this._view.style = { backgroundColor:'red',width:100,height:200 }
}

需要提醒大家的是，只有在組件的render方法被調用時，ref才會被調用，組件才會返回ref。如果你在調用this.refs.xx時render方法還沒被調用，那麼你得到的是undefined。
心得：ref屬性在開發中使用頻率很高，使用它你可以獲取到任何你想要獲取的組件的對象，有個這個對象你就可以靈活地做很多事情，比如：讀寫對象的變數，甚至調用對象的函數。

讓組件做到局部刷新setNativeProps
有時候我們需要直接改動組件並觸發局部的刷新，但不使用state或是props。
setNativeProps 方法可以理解為web的直接修改dom。使用該方法修改 View 、 Text 等 RN自帶的組件，則不會觸發組件的 componentWillReceiveProps 、 shouldComponentUpdate 、componentWillUpdate 等組件生命周期中的方法。

'use strict'

import React, { Component } from 'react';

import  {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    TextInput
} from 'react-native';


import Dimensions from 'Dimensions';
// 屏幕寬度
var screenWidth = Dimensions.get('window').width;
class RNRefDetail extends Component {
    // 構造
    constructor(props) {
        super(props);
        // 初始狀態
        this.state = {
            textInputValue: ''
        };
         this.buttonPressed = this.buttonPressed.bind(this);
    }

    buttonPressed() { //當按鈕按下的時候執行此函數
        let textInputValue = 'yuanmenglong';

        this.setState({textInputValue});

        //修改文本輸入框的屬性值
        this.refs.textInputRefer.setNativeProps({
            editable:false
        });

        this.refs.text2.setNativeProps({
            style:{
                color:'blue',
                fontSize:30
            }
        });
        //使文本輸入框變為不可編輯
    }

    render() {
        return (
            //ref={'text2'}>   //指定本組件的引用名
            <View style={styles.container}>
                <Text style={styles.buttonStyle} onPress={this.buttonPressed}>
                    按我
                </Text>
                <Text style={styles.textPromptStyle} ref="text2">
                    文字提示
                </Text>
                <View>
                    <TextInput style={styles.textInputStyle}
                               ref="textInputRefer"
                               value={this.state.textInputValue}
                               onChangeText={(textInputValue)=>this.setState({textInputValue})}
                    />
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
    },
    buttonStyle: { //文本組件樣式,定義簡單的按鈕
        fontSize: 20,
        backgroundColor: 'grey'
    },
    textPromptStyle: { //文本組件樣式
        fontSize: 20
    },
    textInputStyle: { //文本輸入組件樣式
        width: 150,
        height: 50,
        fontSize: 20,
        backgroundColor: 'grey'
    }
});

module.exports = RNRefDetail;

當點擊按鈕時，會刷新3個控制項的值，但是只是單獨去改變，而不是通過改變state狀態機的機制來刷新界面，在重覆需要多次刷新時使用，普通的時候直接通過state改變即可。 

這樣用的缺點就是局部改變，回導致狀態機混亂。

在用Reactnative寫工程時，預設奇妙的有一種像OC中，或者Java 中或者當前類的私有屬性的想法，state 和props都不能滿足時，就是ref

它能達到其他語言中持有一個view組件，並且局部的刷新

ref 接受值為string類型的參數或者一個函數function

callback。這一特性讓開發者對ref的使用更加靈活。
render() {
    return <TextInput ref={(c) => this._input = c} />;
  },
  componentDidMount() {
    this._input.focus();
  },

render(){
    return <View ref={ (e) => this._view = e } />//將組件view作為參數賦值給了this._view
}
componentDidMount(){
    this._view.style = { backgroundColor:'red',width:100,height:200 }
}

'use strict'
import React, { Component } from 'react';

import  {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    TextInput
} from 'react-native';


import Dimensions from 'Dimensions';
// 屏幕寬度
var screenWidth = Dimensions.get('window').width;
class RNRefDetail extends Component {
    // 構造
constructor(props) {
        super(props);
        // 初始狀態
this.state = {
            textInputValue: ''
};
         this.buttonPressed = this.buttonPressed.bind(this);
    }

    buttonPressed() { //當按鈕按下的時候執行此函數
let textInputValue = 'yuanmenglong';

        this.setState({textInputValue});

        //修改文本輸入框的屬性值
this.refs.textInputRefer.setNativeProps({
            editable:false
});

        this.refs.text2.setNativeProps({
            style:{
                color:'blue',
                fontSize:30
}
        });
        //使文本輸入框變為不可編輯
}

    render() {
        return (
            //ref={'text2'}>   //指定本組件的引用名
<View style={styles.container}>
                <Text style={styles.buttonStyle} onPress={this.buttonPressed}>
                    按我
</Text>
                <Text style={styles.textPromptStyle} ref="text2">
                    文字提示
</Text>
                <View>
                    <TextInput style={styles.textInputStyle}
                               ref="textInputRefer"
value={this.state.textInputValue}
                               onChangeText={(textInputValue)=>this.setState({textInputValue})}
                    />
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
},
    buttonStyle: { //文本組件樣式,定義簡單的按鈕
fontSize: 20,
        backgroundColor: 'grey'
},
    textPromptStyle: { //文本組件樣式
fontSize: 20
},
    textInputStyle: { //文本輸入組件樣式
width: 150,
        height: 50,
        fontSize: 20,
        backgroundColor: 'grey'
}
});

module.exports = RNRefDetail;

當點擊按鈕時，會刷新3個控制項的值，但是只是單獨去改變，而不是通過改變state狀態機的機制來刷新界面，在重覆需要多次刷新時使用，普通的時候直接通過state改變即可。
這樣用的缺點就是局部改變，回導致狀態機混亂。