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的基础，事实也证明这两个假设是合理而精确的，保证了整体界面构建的性能。

ReactNative中获取真实的DOM节点

获取真实的DOM节点

猜你喜欢