react 生命周期分三种状态: 1. 实例期 2.存在期 3.销毁期
-
实例期
1、constructor()
数据初始化;2、getDerivedStateFromProps(props,state)
调用render之前调用,并在初始挂载以及后续更新时都会被调用,返回一个对象来更新state,若返回null则不更新任何内容;3、render
检查props和state的变化并返回虚拟dom;4、componentDidMount()
组件挂载后立即调用,依赖于dom节点的初始化放在这里。可直接调用setState,将触发额外渲染,此渲染会发生在浏览器更新屏幕之前; -
存在期
5、 getDerivedStateFromProps(props,state)
调用render之前调用,并在初始挂载以及后续更新时都会被调用,返回一个对象来更新state,若返回null则不更新任何内容;6、shouldComponentUpdate(nextProps, nextState)
判断组件的输出是否受当前state或props更改的影响,用来控制组件是否重新渲染;7、render
检查props和state的变化并返回虚拟dom;8、getSnapshotBeforeUpdate(prevProps,prevState)
组件初始化时不调用,只有在组件将要更新时才调用,此时可以修改state;9、componentDidUpdate()
组件初始化时不调用,组件更新完成后调用,此时可以获取dom节点; -
销毁期
10、componentWillUnmount()
在此处完成组件的卸载及数据的销毁;