号外号外！走过路过千万不要错过！

截止目前为止 React 已经发布了 v16.12.0 版本, React 生命周期也是日常开发低头不见，抬头见的狗子，可惜狗子它变了。

改变原因

v16.3 版本之前， React 中的更新操作是同步的，这可能会导致性能问题。

举个例子，假如有一个庞大的模块里面嵌套超级多的组件，一旦最顶部的 render 方法执行了，然后依次执行组件的 render 方法，直到最底层组件。这个过程会导致主线程卡主。

官方为了解决这个问题，因此引入了 React Fiber，其解决思路是分片执行，一个更新过程被分为两个阶段(Phase)：第一个阶段 Reconciliation Phase 和第二阶段 Commit Phase。

看了一篇文章，也说清了 React 发展历程，我一直都坚信任何技术方案的出现都是为了以更好的方式解决问题。

React 组件发展历程

React 组件基本可以归结三个阶段：

• createClass Components
• Class Components
• Function Components

createClass Components

示例：

首次使用场景

项目初期只有一个添加商品模块，因业务迭代，从多图商品中分离出视频商品，当前存在的问题：

1. 版本迭代势必同时修改两个模块；
2. 大量逻辑，方法重复。

方案筛选

鉴于以上问题，寻找的解决方案有：

1. 公共逻辑代码抽离；
2. 公共容器组件抽离；
3. Mixin;
4. 高阶组件。