开发者社区> 问答> 正文

#React 差异算法涵盖哪些规则?

#React 差异算法涵盖哪些规则?

展开
收起
因为相信,所以看见。 2020-05-08 11:42:39 482 0
1 条回答
写回答
取消 提交回答
  • 阿里,我所有的向往

    区分两棵树时,React首先比较两个根元素。行为因根元素的类型而异。它涵盖了对帐算法中的以下规则, 不同类型的元素: 每当根元素具有不同类型时,React都会拆除旧树并从头开始构建新树。例如,to 或from到不同类型的元素会导致完全重建。 相同类型的DOM元素: 比较两个相同类型的 React DOM元素时,React会查看两个属性,保留相同的基础DOM节点,仅更新更改的属性。让我们以除className属性之外的相同DOM元素作为示例, < div className = “ show ”标题= “ ReactJS ” / >

    < div className = “ hide ”标题= “ ReactJS ” / > 相同类型的组件元素: 当组件更新时,实例保持不变,因此在渲染之间保持状态。React更新基础组件实例的属性以匹配新元素,并在基础实例上调用componentWillReceiveProps()和componentWillUpdate()。之后,将调用render()方法,并且diff算法将根据先前的结果和新的结果进行递归。 在子 节点上递归:在DOM节点的子节点上递归时,React只是同时遍历两个子列表,只要有区别,就会生成一个突变。例如,在子级末尾添加元素时,在这两个树之间进行转换会很好。

    2020-05-08 11:42:52
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
利用编译将 Vue 组件转成 React 组件 立即下载
React Native 全量化实践 立即下载
React在大型后台管理项目中的工程实践 立即下载