生命周期(旧)
组件的生命周期可分成三个状态:
- Mounting(挂载):已插入真实 DOM
- Updating(更新):正在被重新渲染
- Unmounting(卸载):已移出真实 DOM
挂载阶段:
ReactDOM.render()触发,初次渲染。组件挂载的生命周期调用顺序如下:
- 1、constructor
- 2、componentWillMount()
- 3、render()
- 4、componentDidMount()
更新阶段:
每当组件的 state 或 props 发生变化时,组件就会更新。
由组件内部this.setState() 或者 父组件render 触发。组件更新的生命周期调用顺序如下:
- 1、shouldComponentUpdate()
- 当props或state发生变化的时候,shouldComponentUpdate()会在渲染执行之前被调用。
- 它是控制组件更新的阀门,默认为true,只能返回true or false。如果为false就不往下走了,无法更新组件。
- 2、componentWillUpdate()
- 3、render()
- 4、componentDidUpdate()
卸载阶段:
由ReactDOM.unmountComponentAtNode()触发。组件卸载的生命周期调用顺序如下:
- 1、componentWillUnmount(),很常用,经常用来做一些收尾工作
调用forceUpdate(),强制更新:
使用场景:不更改任何state中的数据,强制更新一下。
它与更新阶段的区别:
- 就是少走一个钩子,就是控制组件更新的阀门的shouldComponentUpdate钩子不走,它不受阀门的控制。
父组件render触发:
componentWillReceiveProps(),可以接收父组件传递过来的props参数,随后走更新阶段。
生命周期(新)
React16版本之后,以下三个生命周期被废弃:
- componentWillMount()
- componentWillReceiveProps()
- componentWillUpdate()
因为这些生命周期容易被误解和滥用。然后,新提出了两个生命周期钩子:
- getDerivedStateFromProps()
- 在开发中基本上不用,但是毕竟是新提出来的东西
- 它要声明为静态的,能接受参数props和state,返回值要是state对象或者null
- getSnapshotBeforeUpdate()
- 快照钩子,在更新之前获取快照,此用法并不常见。
- 它的任何返回值,都会作为参数传给componentDidUpdate
挂载阶段:
- 1、constructor
- 2、getDerivedStateFromProps()
- 在调用render方法之前调用,并且在初始挂载以及后续的更新时都会被调用。
- 3、render()
- 4、componentDidMount()
更新阶段:
每当组件的 state 或 props 发生变化时,组件就会更新。
- 1、getDerivedStateFromProps()
- 在调用render方法之前调用,并且在初始挂载以及后续的更新时都会被调用。
- 根据shouldComponentUpdate()的返回值,来判断React组件的输出是否受当前state或者props更改的影响。
- 2、shouldComponentUpdate()
- 当props或state发生变化的时候,shouldComponentUpdate()会在渲染执行之前被调用。
- 它是控制组件更新的阀门,默认为true,只能返回true or false。如果为false就不往下走了,无法更新组件。
- 3、render()
- 4、getSnapshotBeforeUpdate()
- 它的任何返回值,都会作为快照值参数传给componentDidUpdate。
- 5、componentDidUpdate(preProps, preState, snapShotValue)
- 它能接受三个参数,一个是preProps、一个是preState,第三个参数就是快照值。
- preProps和preState就是更新之前的props和state。
卸载阶段:
- 1、componentWillUnmount(),很常用,经常用来做一些收尾工作
标签:生命周期,render,更新,React,state,调用,组件 From: https://www.cnblogs.com/luckest/p/16733984.html