ReactNative中獲取真實的DOM節點

獲取真實的DOM節點

• 在ReactNative中，可以把組件看成一個“狀態機”. 根據不同的status有不同的UI展示。只要使用setState改變狀態值，根據diff算法算出來有差以後，就會執行ReactDom的render方法，重新渲染頁面
• 但是組件並不是真實的 DOM 節點，而是存在於內存之中的一種數據結構，叫做虛擬 DOM （virtual DOM），只有當它插入文檔以後，纔會變成真實的 DOM
• 需要從組件獲取真實 DOM 的節點，這時就要用到 ref 屬性

export default class AClass extends Component<{}> {
  render() {
    return (

        <View style={styles.container}>

            <TouchableOpacity activeOpacity={0.5}
                          onPressIn={() => this.activeEvent()}>

                <View ref = 'changeColor' style = {styles.innerViewStyle}>
                     <Text>變顏色</Text>
                </View>

            </TouchableOpacity>
        </View>
    );
  }

  activeEvent(){
    this.refs.changeColor.backgroundColor = 'yellow'
  }
}

• 補充：
  什麼是DOM Diff算法

       Web界面由DOM樹來構成，當其中某一部分發生變化時，其實就是對應的某個DOM節點發生了變化。在React中，構建UI界面的思路是由當前狀態決定界面。前後兩個狀態就對應兩套界面，然後由React來比較兩個界面的區別，這就需要對DOM樹進行Diff算法分析。
     即給定任意兩棵樹，找到最少的轉換步驟。但是標準的的Diff算法複雜度需要O(n^3)，這顯然無法滿足性能要求。要達到每次界面都可以整體刷新界面的目的，勢必需要對算法進行優化。這看上去非常有難度，然而Facebook工程師卻做到了，他們結合Web界面的特點做出了兩個簡單的假設，使得Diff算法複雜度直接降低到O(n)
  1、兩個相同組件產生類似的DOM結構，不同的組件產生不同的DOM結構；
  2、對於同一層次的一組子節點，它們可以通過唯一的id進行區分。
      算法上的優化是React整個界面Render的基礎，事實也證明這兩個假設是合理而精確的，保證了整體界面構建的性能。