React组件生命周期流程与调用顺序及setState在生命周期中的使用注意事项

最新推荐文章于 2024-08-04 13:48:08 发布

淡定丶浩锅

最新推荐文章于 2024-08-04 13:48:08 发布

阅读量8.9k

点赞数 3

分类专栏： react 文章标签： react生命周期 setState react

本文链接：https://blog.csdn.net/Gunahao/article/details/82695555

版权

React组件分为有状态和无状态组件，有状态组件经历constructor、componentWillMount、render、componentDidMount等生命周期。在生命周期中，setState在特定阶段如componentWillMount和componentDidUpdate需要注意使用，以避免无限循环更新。当props或state变化时，会触发UNSAFE_componentWillReceiveProps、shouldComponentUpdate、UNSAFE_componentWillUpdate和componentDidUpdate等钩子。shouldComponentUpdate用于优化性能，componentWillUnmount中不应使用setState。

摘要由CSDN通过智能技术生成

React组件在挂载到真实DOM之前会以JavaScript变量的形式经历一系列的生命周期，该变量跟真实DOM树形结构一样。最终渲染到到真实DOM上。

React组件分为有状态组件和无状态组件，无状态组件本质上就是一个函数，它没有this对象，没有state，没有生命周期等特性，不能使用ref引用。有状态组件即一个类，必须继承于React.Component，有状态组件拥有继承父类this对象，自己的state及生命周期，唯一必须调用的方法既render()方法并返回一段DOM。

有状态组件从挂在到卸载经历一下生命周期：

constructor() {
    super() // 必须在定义在内部state之前
}           // super指代父类实例，调用super继承父类的this对象

UNSAFE_componentWillMount(){}    //组件即将加载componentWillMount在16.3.0被弃用但目前前依然可用，以下UNSAFE_开头的均同理
render(){}                //组件被渲染
componentDidMount(){}     //组件已加载

UNSAFE_componentWillReceiveProps(nextProps){}            // 组件将要从父组件获得props
shouldComponentUpdate(nextProps, nextState){}     // 是否确认重新渲染组件
render() {}               // 重新渲染组件
UNSAFE_componentWillUpdate(){}   // 组件将要更新
componentDidUpdate(){}    // 组价被更新

componentWillUnmount(){}  // 组件将要卸载

上实