生命周期
所谓的生命周期就是指某个事物从开始到结束的各个阶段
当然在 React.js 中指的是组件从创建到销毁的过程
React.js 在这个过程中的不同阶段调用的函数
通过这些函数,我们可以更加精确的对组件进行控制
前面我们一直在使用的 render 函数其实就是组件生命周期渲染阶段执行的函数
演变
每个版本可能对生命周期的api进行挑战 总共可以分为三部分 之前 现在 未来
之前(React 16.3 之前)
挂载阶段
constructor
类的构造函数,也是组件初始化函数,一般情况下,我们会在这个阶段做一些初始化的工作
- 初始化 state
- 处理事件绑定函数的 this
|
componentWillMount
|
render
render 方法是 Class 组件必须实现的方法
|
componentDidMount
在组件挂载后(render 的内容插入 DOM 树中)调用。通常在这个阶段,我们可以:
- 操作 DOM 节点
- 发送请求
|
更新阶段
父组件更新引起组件更新
componentWillReceiveProps(nextProps)
|
shouldComponentUpdate(nextProps, nextState)
发生在更新阶段,getDerivedStateFromProps 之后,render 之前,该函数会返回一个布尔值,决定了后续是否执行 render,首次渲染不会调用该函数
|
componentWillUpdate(nextProps, nextState)
shouldComponentUpdate返回true以后,组件进入重新渲染的流程,进入componentWillUpdate,这里同样可以拿到nextProps和nextState。
|
render
|
componentDidUpdate(prevProps, prevState)
该函数会在 DOM 更新后立即调用,首次渲染不会调用该方法。我们可以在这个函数中对渲染后的 DOM 进行操作
|
组件自身更新
shouldComponentUpdate
componentWillUpdate
render
componentDidUpdate
卸载阶段
componentWillUnmount
|
卸载阶段案例:
|
现在
挂载阶段
constructor
初始化
static getDerivedStateFromProps(props, state)
这个是新方法api 请注意 this问题 因为是静态方法
|
render
必须要有的
componentDidMount
|
更新阶段
父组件更新引起组件更新
static getDerivedStateFromProps(props, state)
shouldComponentUpdate()
componentWillUpdate()
render()
getSnapshotBeforeUpdate()
组件更新之后,即将重新渲染DOM
|
componentDidUpdate()
组件自身更新
shouldComponentUpdate()
componentWillUpdate()
render()
getSnapshotBeforeUpdate()
componentDidUpdate()
卸载阶段
componentWillUnmount
错误处理
static getDerivedStateFromError()
componentDidCatch(error, info)
错误捕获只能捕获到生命周期当中的错误
未来
useEffect()
可以把 useEffect
Hook 看做 componentDidMount
,componentDidUpdate
和 componentWillUnmount
这三个函数的组合
它在第一次渲染之后和每次更新之后都会执行
你可能会更容易接受 effect 发生在“渲染之后”这种概念
不用再去考虑“挂载”还是“更新”
React 保证了每次运行 effect 的同时,DOM 都已经更新完毕。
将 document 的 title 设置为点击次数
|
与 componentDidMount
或 componentDidUpdate
不同,使用 useEffect
调度的 effect 不会阻塞浏览器更新屏幕,这让你的应用看起来响应更快。大多数情况下,effect 不需要同步地执行。
如果你的 effect 返回一个函数,React 将会在执行清除操作时调用它。
参考:React生命周期