概述
今天学习react时候,借编写这篇文章加深一下对react周期加深印象
5287253-bd799f87556b5ecc副本.png
Initialization阶段
constructor()
constructor方法在组件建立前被调用。
1、在这个方法里面,应该先调用super(props),否则this.props就会未定义。
2、这个方法的主要用途是,初始化props,state和绑定方法。
在 constructor() 函数中不要调用 setState() 方法。如果你的组件需要使用内部 state,请直接在构造函数中为 this.state 赋值初始 state:
constructor(props) {
super(props);
// 不要在这里调用 this.setState()
this.state = { counter: 0 };
this.handleClick = this.handleClick.bind(this);
}
Mounting阶段
componentWillMount()
这个方法在render方法执行前渲染,componentWillMount() 在挂载之前被调用。它在 render() 之前调用,因此在此方法中同步调用 setState() 不会触发额外渲染。通常,我们建议使用 constructor() 来初始化 state。
避免在此方法中引入任何副作用或订阅。如遇此种情况,请改用 componentDidMount()。
此方法是服务端渲染唯一会调用的生命周期函数。
此方法即将过时,项目中避免使用。
render()
当调用render的时候,组件会检查props和state并返回下列类型中的一个:
- react元素。
- 字符串或者数字。
- Portals。
- null。(不渲染)
- Booleans。(不渲染)
- react.Fragment。
componentDidMount()
componentDidMount() 会在组件挂载后(插入 DOM 树中)立即调用。依赖于 DOM 节点的初始化应该放在这里。如需通过网络请求获取数据,此处是实例化请求的好地方。
这个方法是比较适合添加订阅的地方。如果添加了订阅,请不要忘记在 componentWillUnmount() 里取消订阅
你可以在 componentDidMount() 里可以直接调用 setState()。它将触发额外渲染,但此渲染会发生在浏览器更新屏幕之前。如此保证了即使在 render() 两次调用的情况下,用户也不会看到中间状态。请谨慎使用该模式,因为它会导致性能问题。通常,你应该在 constructor() 中初始化 state。
Updation阶段
shouldComponentUpdate()
shouldComponentUpdate() 会在渲染执行之前被调用。返回值默认为 true,返回 false
,则不会调用componentWillUpdate(),render(),React 可能会将 shouldComponentUpdate
视为提示而不是严格的指令,并且,当返回 false
时,仍可能导致组件重新渲染。
此方法,大部分情况下组件可能都不需要它,仅作为性能优化的方式而存在,例如阻止子组件每次都渲染。
UNSAFE_componentWillUpdate()
此生命周期之前名为 componentWillUpdate,当组件收到新的 props 或 state 时,会在渲染之前调用 UNSAFE_componentWillUpdate()。使用此作为在更新发生之前执行准备更新的机会。初始渲染不会调用此方法.
此方法即将过时,项目中避免使用。
componentDidUpdate()
componentDidUpdate(prevProps, prevState, snapshot)
componentDidUpdate() 会在更新后会被立即调用。首次渲染不会执行此方法。
当组件更新后,可以在此处对 DOM 进行操作。如果你对更新前后的 props 进行了比较,也可以选择在此处进行网络请求。(例如,当 props 未发生变化时,则不会执行网络请求)。
componentDidUpdate(prevProps) {
// 典型用法(不要忘记比较 props):
if (this.props.userID !== prevProps.userID) {
this.fetchData(this.props.userID);
}
}
你也可以在 componentDidUpdate() 中直接调用 setState(),但请注意它必须被包裹在一个条件语件里,正如上述的例子那样进行处理,否则会导致死循环。
Unmounting
componentWillUnmount()
componentWillUnmount() 会在组件卸载及销毁之前直接调用。在此方法中执行必要的清理操作,例如,清除 timer,取消网络请求或清除在 componentDidMount() 中创建的订阅等。
componentWillUnmount() 中不应调用 setState(),因为该组件将永远不会重新渲染。组件实例卸载后,将永远不会再挂载它。
总结
简单记录一下react的生命周期,有些过时的就没做太多介绍,其实官网介绍的还是很清晰的,大家可以参考官网熟悉生命周期。
网友评论