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>
    }

}