一、什么是react？

二、react的生命周期

三、对于react生命周期的思考

熟练使用react开发项目之后，最近在学习react的底层原理以及源码，顺便总结一下react的生命周期。

一、什么是react？

在学习原理和源码之前我们必须先明白什么是react。官方文档对于react的定义是：

A JavaScript library for building user interfaces

用于构建用户界面的 JavaScript 库

其实我们可以简单的理解为react主要做两件事：响应事件、渲染UI

二、react的生命周期

在学习react的生命周期函数之前我们先来简单的了解一下react的渲染过程：

首屏渲染过程如下：

调用ReactDOM.render
进入Render阶段
采用深度优先遍历创建fiber树（虚拟dom节点）
进入commit阶段，即进入渲染器渲染视图

组件更新阶段的过程：

进入Render阶段
采用深度优先遍历的方式创建fiber树
通过diff算法标记变化
进入commit阶段，执行变化对应的视图操作

由以上的过程描述我们可以把react的生命周期分为两个阶段：render阶段和commit阶段

接下来我们就来了解一下render阶段和commit阶段，页面挂载、组件更新以及组件卸载时分别涉及的钩子函数以及各个钩子函数的作用：

旧的生命周期（v16.3之前）：

Mount

Update

Unmount

render阶段

constructor

加载的时候调用一次，可以初始化state

→

componentWillMount

组件加载时调用，整个生命周期只调用一次，此时可以修改state

→

render

创建虚拟dom，进行diff算法，更新dom树

props更新时会触发componentWillReceiveProps

组件接收新的props时调用

→

shouldComponentUpdate

组件接收新的prop或者state时调用，返回true则会更新dom，返回false则阻止更新

→

componentWillUpdate

组件将要更新时调用，可以修改state

→

render

创建虚拟dom，进行diff算法，更新dom树

commit阶段

componentDidMount

组件渲染之后调用，只调用一次，可获取真实dom节点

componentDidUpdate

组件更新完后调用

componentWillUnmount

组件即将卸载前调用

新的生命周期（v16.3开始）：

	Mount	Update	Unmount
render阶段	constructor 加载的时候调用一次，可以初始化state → getDerivedStateFromProps（props，state）用来替换componentWillReceiveProps()更为安全的方案。不能使用this,返回一个取决于props变化的对象用来更新state，返回null则不需要更新state，解决在某些特殊情况下state的值取决于props的问题。 → render 创建虚拟dom，进行diff算法，更新dom树	getDerivedStateFromProps 同左边 → shouldComponentUpdate 组件接收新的prop或者state时调用，返回true则会更新dom，返回false则阻止更新 → render 创建虚拟dom，进行diff算法，更新dom树
pre-commit阶段		getSnapshotBeforeUpdate 用来替换componentWillUpdate()更为安全的方案。在更新之前被调用，返回的值会传给componentDidUpdate(),常用于在异步渲染期间改变窗口尺寸等
commit阶段	componentDidMount 组件渲染之后调用，只调用一次，可获取真实dom节点	componentDidUpdate 组件更新完后调用	componentWillUnmount 组件即将卸载前调用

总结：如上描述可知在16.x之前和之后的生命周期函数的变化有，16.x的生命周期弃用了componentWillMount、componentWillReceiceProps、componentWillUpdate

新增了getDerivedStateFromProps、getSnapshotBeforeUpdate来代替以上弃用的三个钩子函数。在react16的版本中并未完全删除这三个生命周期函数，而是新增UNSAFE_前缀去使用（UNSAFE_componentWillMount等），废弃的钩子和新增的钩子函数同时使用会报错，但是在react17中则弃用的钩子函数将被删除。

三、对于react生命周期的思考

其实react生命周期过程没有改变，只是16.3的版本加入fiber之后，将以前的同步渲染改成了异步渲染，因此对应生命周期函数的处理方式也改变了。

react之生命周期相关推荐

附实例！图解React的生命周期及执行顺序
本文由云+社区发表作者:前端林子 1.七个可选的生命周期可以结合下图来看: (1) componentWillMount() 仅在render()方法前被调用一次,如果在该方法中调用了setSta ...
react组件生命周期_React组件生命周期-挂钩/方法介绍
react组件生命周期 React components have several lifecycle methods that you can override to run your code a ...
[react] 说说react的生命周期有哪些？
[react] 说说react的生命周期有哪些? 装载阶段组件第一次被渲染时的阶段,这一阶段相关的生命周期函数有: constructor componentWillMount render com ...
react初识生命周期
好多朋友都在问我react生命周期执行的顺序今天就说一下吧, react有三种构建组件的方法: 第一呢,就是React.createClass(),ES5写法现在用的比较少第二呢:ES6 clas ...
react常用生命周期流程图
简述本文将常用的react生命周期绘制成了一张流程图,便于理解和记忆; react中每个组件都包含"生命周期方法",我们可以重写这些方法,以便于在运行过程中特定的阶段执行这些方法 ...
React的生命周期（面试必问）
React的生命周期两张图带你理解 React的生命周期 React的生命周期(旧) class Life extends React.Component{// 构造器constructor(pro ...
简单认识React的生命周期
一. React的生命周期这里render渲染函数会执行两次,第一次是当组件初始化完成的时候,第二次是当组件完成从数据的修改的时候再执行一次 1.创建和初始化到的生命周期: (1) getDefau ...
React 组件生命周期
组件的生命周期可分成三个状态: Mounting:已插入真实 DOM Updating:正在被重新渲染 Unmounting:已移出真实 DOM 生命周期的方法有: componentWillMoun ...
React的生命周期
本人是转载kiinlam github 实例化首次实例化 getDefaultProps getInitialState componentWillMount render componentDid ...

react之生命周期

一、什么是react？

二、react的生命周期

三、对于react生命周期的思考

react之生命周期相关推荐

最新文章

热门文章