标签：更新   加载   分片   receive   维护   开发模式   调用   页面   副作用   

JSX

表现上是JS的语法扩展。将标签语法和JS语法合在一起。实际上是组件化的开发模式让UI和逻辑实现分离。

React Fiber

React核心算法的重新实现

React同步更新过程的局限

React加载更新组件后会做很多事，调用生命周期函数、对比Virtural DOM，更新DOM树。
由于React的更新过程是同步的在组件中深入的过程，当DOM树比较庞大的时候，有很多的组件要更新的话，就会出现页面卡顿。

React Fiber的方式

分片的方法，把一个耗时长的任务分成多个小片，每执行好更新任务的一个小片，就给其他任务一个执行的机会。Fiber就是维护每一个分片的数据结构。

React Fiber对代码的影响

为了防止更新过程被打断，React Fiber将更新的过程分为两个阶段，Reconciliation Phase和Commit Phase

• Reconciliation Phase：找到更新哪些DOM，这个阶段可以被打断。
• Commit Phase：更新DOM，这个阶段不可以被打断

第一个阶段涉及的生命周期函数：

• componentWillMount
• componentWillReceiveProps
• shouldComponentUpdate
• componentWillUpdate

第二个阶段涉及的生命周期函数：

• componentDidMount
• componentDidUpdate
• componentWillUnmount

因为第一阶段的生命周期函数是会被打断的，打断之后这个分片的任务就会重新执行，也就是重新执行这个生命周期函数。所以原本执行一次的生命周期函数就会被多次执行。
所以在生命周期函数内进行操作的时候就要考虑生命周期函数是否包含不能重复进行的副作用。

React官方文档总结

标签：更新   加载   分片   receive   维护   开发模式   调用   页面   副作用   

原文地址：https://www.cnblogs.com/zhangjw83/p/14733424.html