React 生命周期文档
1、理解
- 组件对象从创建到死亡它会经历特定的生命周期阶段
- React组件对象包含一系列的勾子函数(生命周期回调函数), 在生命周期特定时刻回调
- 我们在定义组件时, 可以重写特定的生命周期回调函数, 做特定的工作
2、生命周期流程图
-
基本生命周期图
-
完整生命周期图
-
之前生命周期图(有些被废弃了)
3、生命周期详述
-
组件的三个生命周期状态:
- Mounting:创建时
- Updating:更新时
- Unmounting:卸载时
-
生命周期流程:
- 第一次初始化渲染显示 -->
ReactDOM.render()
constructor()
static getDerivedStateFromProps(nextProps, prevState)
render()
componentDidMount()
- 组件内部更新state -->
this.setSate()
static getDerivedStateFromProps(nextProps, prevState)
shouldComponentUpdate(nextProps, nextState)
render()
getSnapshotBeforeUpdate(prevProps, prevState)
componentDidUpdate()
- 父组件更新state, 导致子组件被重新渲染(少一个函数)
static getDerivedStateFromProps(nextProps, prevState)
shouldComponentUpdate(nextProps, nextState)
render()
componentDidUpdate(prevProps, prevState, snapshot)
- 移除组件 -->
ReactDOM.unmountComponentAtNode(containerDom)
componentWillUnmount()
- 第一次初始化渲染显示 -->
-
生命周期函数作用:
-
constructor()
- 初始化state
- 修改函数的this指向
- 只会执行一次
-
static getDerivedStateFromProps(nextProps, prevState)
- 一般不用
- 使组件能够根据props的更改来更新其内部状态
-
render()
- 渲染组件
-
componentDidMount()
- 发送ajax请求
- 执行异步任务
- 只会执行一次
-
shouldComponentUpdate(nextProps, nextState)
- react性能优化,减少不必要的render
-
getSnapshotBeforeUpdate(prevProps, prevState)
- 一般不用
- 可以在渲染之前得到DOM对象从而获取一些信息
-
componentDidUpdate(prevProps, prevState, snapshot)
- 更新组件完成时对DOM进行操作
- 发送ajax请求(注意不要陷入死循环)
-
componentWillUnmount()
- 清除定时器,收尾工作等
-
4、重要的生命周期(必须掌握)
- constructor()
- componentDidMount()
- render()
- componentWillUnmount()
- componentDidUpdate()
5、即将被废弃的生命周期
- componentWillMount()
- 组件挂载之前调用
- componentWillUpdate()
- 组件将要更新之前调用
- componentWillReceiveProps()
- 组件将要接受props,还没开始渲染时调用
6、扩展
- 能在任何位置捕获JavaScript错误,记录这些错误信息
- static getDerivedStateFromError(error)
- 通过更新状态 --> 从而渲染显示错误信息的组件
- componentDidCatch()
- 记录错误信息