react类组件常用生命周期理解(转载+补充)

常用的生命周期图示:

 

挂载阶段:constructor =>  render => componentDidMount => 结束
更新阶段: render => componentDidUpdate => 结束
卸载阶段:componentWillUnmount => 结束

constructor
构造函数用于以下两种情况:
通过给 this.state 赋值对象来初始化内部 state。this.state = {prop: val, ...}
为事件处理函数绑定实例 this.handler = this.handler.bind(this);
如果不初始化 state 或不进行方法绑定,则不需要为 React 组件实现构造函数。
super(props)应写在该方法的最前面;否则,this.props在构造函数中可能会出现未定义的bug


render
render()方法是class组件中唯一必须实现的方法。
返回以下类型之一:React元素, 数组或fragments, Portals, 字符串或数值类型, 布尔类型或null
render()函数应该为纯函数


componentDidMount()
会在组件挂载后(插入DOM树中)立即调用。

进行依赖于DOM节点的初始化,如需通过网络请求获取数据,此处是实例化请求的好地方。
添加订阅的地方。如果添加了订阅。不要忘记在 componentWillUnmount() 里取消订阅
可以在 componentDidMount()里可以直接调用setState()。将触发额外渲染,会导致性能问题。


componentDidUpdate()
componentDidUpdate(prevProps, prevState, snapshot) 有三个默认参数
componentDidUpdate() 会在更新后会被立即调用。首次渲染不会执行此方法。
可以在此处对 DOM 进行操作。可以选择在此处进行网络请求。
可以在 componentDidUpdate()中直接调用 setState(),但请注意它必须被包裹在一个条件语件里,否则会导致死循环。导致额外的重新渲染,会影响组件性能。
如果组件实现了getSnapshotBeforeUpdate(), 则它的返回值将作为 componentDidUpdate() 的第三个参数 “snapshot” 参数传递。否则此参数将为 undefined。


componentWillUnmount()
componentWillUnmount() 会在组件卸载及销毁之前直接调用。在此方法中执行必要的清理操作,例如,清除 timer,取消网络请求或清除在 componentDidMount() 中创建的订阅等。
componentWillUnmount() 中不应调用 setState(),因为该组件将永远不会重新渲染。组件实例卸载后,将永远不会再挂载它。
————————————————

原文链接:https://blog.csdn.net/xiasohuai/article/details/100103568

猜你喜欢

转载自www.cnblogs.com/liuyuweb/p/12289937.html