Question

6.1 React 是如何渲染组件的

• 在新版本的 React 当中， React 的底层被重写了。 React 换上了一个新的引擎，这个引擎叫做 React Fiber.React Fiber 作用的也即是 React 最核心的功能，它将 React 应用界面更新的过程分为了两个主要的部分：

• 调度过程
• 执行过程

在调度过程中，有 4 个生命周期函数会被触发

• componentWillMount
• componentWillReceiveProps
• shouldComponentUpdate
• componentWillUpdate

在执行过程中，有 3 个生命周期函数会被触发：

• componentDidMount
• componentDidUpdate
• componentWillUnmount

6.2 React 组件生命周期方法

React 为了方便我们更好地控制自己的应用，提供了许多预置的生命周期方法。这些固定的生命周期方法分别会在组件的挂载流程、更新流程、卸载流程中触发

• componentWillMount 开始插入真实 DOM
• componentDidMount 插入真实 DOM 完成
• componentWillUpdate 开始重新渲染
• componentDidUpdate 重新渲染完成
• componentWillUnmount 已移出真实 DOM
• componentWillReceiveProps 已加载组件收到新的参数时调用
• shouldComponentUpdate 组件判断是否重新渲染时调用

componentDidMount

在此方法中可进行

• 与其他 JavaScript 框架集成，如初始化 jQuery 插件；
• 使用 setTimeout / setInterval 设置定时器；
• 通过 Ajax / Fetch 获取数据；
• 绑定 DOM 事件

6.3 总结

• React 组件渲染包含三个流程：挂载流程、更新流程、卸载流程
• 各个生命周期函数会在特定的时刻触发并适用于不同的使用场景
• 通过使用生命周期函数我们可以对应用进行更精准的控制
• 如果你需要发起网络请求，将其安排在合适的生命周期函数中是值得推荐的做法
• 了解掌握 React 组件渲染的流程和原理对我们更深入掌握 React 非常有帮助