Reactnative中ref

ref是什麼？
ref是組件的特殊屬性，組件被渲染後，指向組件的一個引用。能夠經過組件的ref屬性，來獲取真實的組件。
由於，組件並非真正的DOM節點，而是存在於內存中的一種數據結構，稱爲虛擬的DOM，只有當它真正的插入文檔以後，才變爲真正的DOM節點。根據React的設計，因此的DOM變更都發生在虛擬DOM上，而後再將實際的部分反映到真實的DOM上--這就是 DOM DIff，它能夠提升頁面性能。


如何使用ref呢？

ref屬性的定義是在使用組件的部分，而組件的方法之類的都是在定義組件的裏面就有的。render方法被調用的時候，組件就會被渲染。渲染完成以後，就能夠獲取這個組件實例啦，於是就能夠調用組件實例裏的方法或者變量啦。

定義組件的方式一   ref="reftest"
this.refs.reftest     或者     this.refs[reftest]   ，  這兩種方式均可以得到當前的組件。
得到當前組件的大小， let size = this.refs.reftest.getSize();

定義組件的方式二   ref={reftest=>this.reftest=reftest}   [當組件被渲染後，ref屬性reftest就有值啦，而後咱們將它賦值給this.reftest 。接下來就能夠使用this.reftest來獲取相應的方法]
this.reftest     或者     this.refs['reftest']   ，  這兩種方式均可以得到當前的組件。
這種方式定義，就能夠這樣使用，var size = this.reftest.getSize();

<Text style={{fontSize:20}}
      onPress={()=>{
        var size =  this.refs.reftest.getSize();
        this.setState({
            size:size,
        })
      }
      }
    >
    獲取氣球大小:{this.state.size}

</Text>
<State ref="reftest">

</State>

State中的方法：

export default class State extends Component {    constructor(props){        super(props);        this.state={            size:60,        }    }    getSize(){        return this.state.size;    }    render() {        return <View style={{flex: 1}}>            <NarBar onSelect={() => {                Actions.pop()            }} title='下一頁'/>            <Text style={{fontSize:20}}                  onPress={()=>{                      this.setState({                          size:this.state.size+10                      })                  }}            >                變大變大            </Text>            <Text style={{fontSize:20}}                  onPress={()=>{                      this.setState({                          size:this.state.size-10                      })                  }}            >                變小變小            </Text>            <Image style={{width:this.state.size,height:this.state.size,backgroundColor:'red'}}/>        </View>    }}