react native獲取到真實的DOM節點

this.state:開發中，組件確定要與用戶進行交互，React的一大創新就是將組件當作了一個狀態機，一開始有一個初始狀態，而後用戶交互，致使狀態變化，從而觸發從新渲染頁面

一、當用戶點擊組件，致使狀態變化，this.setSate方法就修改狀態值，每次修改之後，會自動調用this.render方法，再次渲染組件
二、能夠把組件當作一個狀態機，根據不一樣的status有不一樣的UI展現，只要使用setState改變狀態值，根據diff算法算出有差值後，就會執行ReactDom的render方法，從新渲染界面
this.props和this.state都用於描述組件的特性，區別在於：
this.props表示那些一旦定義，就再也不更改的特性；
this.state是會隨着用戶交互而產生改變的特性

獲取真實的Dom節點:
一、在React Native中，組件並非真實的DOM節點，而是存在於內存中的一種數據結構，叫虛擬DOM
二、只有當它插入文檔後，纔會變成真實的DOM

在以前的html,JavaScript中須要經過ID，className等來獲取，在react native中真實的Dom節點經過ref獲取

clicking(){
this.setState({
	title:'變化了'
})
//獲取topView還有那個Text那個節點：
this.refs.topView
this.refs.event 
}
render() {
        return (
            <View style={styles.container}>
                <View style={styles.top_topContainer} ref="topView">
                   <Image style={styles.Icon} source={require('./imgs/hb.jpg')}/>
			        <TextInput 
			        style={styles.userStyle}
			        placeholder='請輸入用戶名'
			        clearButtonMode='always' //never 永遠不顯示刪除 always 一直顯示  
			        clearTextOnFocus={true}  //獲取焦點時是否清空文字 、
			        enablesReturnKeyAutomatically={false}  //是否自動啓用回車鍵，有內容就顯示，沒有就不啓用
			        returnKeyType = 'go'  //回車鍵上的文字: go前往 join加入 next 下一項 route路線 send 發送 search 搜索 
			        onChangeText={()=>{console.warn('用戶名是...')}} //文字修改完從新給state的query賦值
			        />
			        <TextInput 
			        style={styles.userStyle}
			        placeholder='請輸入密碼'
			        clearButtonMode='always' //never 永遠不顯示刪除 always 一直顯示  
			        clearTextOnFocus={true}  //獲取焦點時是否清空文字 
			        password={true}
			        enablesReturnKeyAutomatically={false}  //是否自動啓用回車鍵，有內容就顯示，沒有就不啓用
			        returnKeyType = 'go'  //回車鍵上的文字: go前往 join加入 next 下一項 route路線 send 發送 search 搜索 
			        onChangeText={()=>{console.warn('用戶名是...')}} //文字修改完從新給state的query賦值
			        />
                </View>
                <View style={styles.loginStyle}>
            <TouchableOpacity onPress={()=>{this.clicking()}}>
                    <Text style={
  
  
   
   
            
   

  {textAlign:'center'}} ref="event">文章學習</Text>
            </TouchableOpacity>
        </View>
            </View>
        );
    }

ref就能夠獲取某一個真實的dom節點

本文同步分享在 博客「zoepriselife316」（CSDN）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。