React更像一个功能性的用户界面库,而不是一个成熟的框架。它可以让开发人员能够用组件构建用户界面,这些组件可以随着时间的推移而改变,不需要重写复杂的代码。此外,尽管大多数JavaScript框架不能很好地与搜索引擎配合使用,从而降低了搜索引擎的排名,但React网站是在服务器端呈现的,从而加快了搜索引擎优化的速度。

 

React是基于渲染功能。这两个函数读取到当前状态,并在目标页面上将其转换为虚拟显示。当React得知状态发生变化时,他会重新运行这些函数,计算页面的新的虚拟表现,然后自动将结果转换为反映新表现所需的DOM更新。

 

本文将介绍React的更新机制。

 

一、React更新机制

 

前面已经介绍了React的渲染流程:

React更新机制深入了解_React 

React的更新过程呢?

React更新机制深入了解_React_02 

 

二、React更新过程。

 

propsstate更改时,React调用Reactrender方法,从而创建一个不同的树。

 

React需要根据两个树之间的差异来判断如何有效地更新UI

 

若一个树与另一个树进行完全的比较更新,则即使是最高级的算法,其复杂度为O(n3^33),其中n是树中的元素数。

 

假如算法被用在React中,那么显示1000个元素所需执行的计算量将达到十亿量级。

 

这一开销过于昂贵,因此React的更新性能将变得非常低。

 

那么React就优化了这个算法,把它优化为O(n),怎么优化它呢?

 

同层次的节点互相比较,而不跨节点。

 

节点类型不同,产生的树结构也不同。

 

在开发过程中,通过key来指定在不同渲染下哪些节点保持稳定。

React更新机制深入了解_React_03 

场景1:比较不同类型的元素。

 

React将在节点为不同元素时拆除原始树并建立新树:

 

一种元素被转化、转化、转化的过程。

 

这将触发完整的重构过程。

 

在卸载树时,还会销毁相应的DOM节点,并且组件实例将执行componentWillUnmount方法。

 

在创建一个新树时,将创建相应的DOM节点并将其插入到DOM中,并且组件实例将执行componentWillMount方法,随后在componentDidMount方法之后执行。

 

例如以下代码更改:

 

重写将销毁计数器组件并重新加载新组件,而不会再使用计数器。

React更新机制深入了解_React_04 

 

场景二:比较相同类型的元素。

 

如果比较的是两个相同类型的React元素,那么React将保留DOM节点,只对更新更改的属性进行对比。

 

例如以下代码更改:

 

React知道,通过比较这两个元素,只需要在DOM元素上修改className属性。

React更新机制深入了解_React_05 

 

例如以下代码更改:

 

在更新style属性时,React只更新更改了的属性。

 

React知道,通过对这两个元素进行比较,只需要在DOM元素上修改color样式,而不需要修改fontWeight

React更新机制深入了解_React_06 

若相同类型的组件元素:

 

该组件将保持不变,React将更新该组件的props并调用componentWillReceiveProps()方法和componentWillUpdate()方法。

 

接下来,调用render()方法,并且diff算法将递归处理先前的和新的结果。

 

场景三:对节点进行递归。

 

缺省情况下,当DOM节点的子元素被递归时,React同时遍历两个子元素列表;当出现差异时,将生成mutation

 

让我们看看最后插入一条数据时的情形:

React更新机制深入了解_React_07 

前两个比较完全相同,因此没有生成mutation

 

最终的比较结果是mutation,它可以插入到新的DOM树中。

 

但如果我们要在前面插入数据:

React更新机制深入了解_React_08 

 

React对每个子元素都有作用,而不是让星际穿越和盗梦空间保持不变。

 

这样比较方法效率不高,会带来一些性能问题。