React 生命周期的打怪升级之路

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

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

改变原因

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

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

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

阅读更多

React Hooks学习笔记

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

React 组件发展历程

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

  • createClass Components
  • Class Components
  • Function Components

createClass Components

示例:

阅读更多

高阶组件

首次使用场景

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

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

方案筛选

鉴于以上问题,寻找的解决方案有:

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