react生命周期有哪些
时间: 2023-07-17 15:00:34 浏览: 87
React 组件的生命周期方法包括以下几个阶段:
1. Mounting(挂载阶段):
- constructor:组件被创建时调用,用于初始化状态和绑定事件处理函数。
- static getDerivedStateFromProps:在组件实例化和接收新的 props 时被调用,用于更新状态。
- render:根据组件的状态和属性返回 JSX 元素。
- componentDidMount:组件被挂载到 DOM 后调用,可以进行异步操作和与外部库集成。
2. Updating(更新阶段):
- static getDerivedStateFromProps:在接收新的 props 或者 state 发生变化时被调用,用于更新状态。
- shouldComponentUpdate:在重新渲染前被调用,用于控制是否需要重新渲染,默认返回 true。
- render:根据组件的状态和属性返回 JSX 元素。
- getSnapshotBeforeUpdate:在 render 方法执行之后、更新 DOM 之前调用,用于获取更新前的 DOM 信息。
- componentDidUpdate:组件更新后被调用,可以进行 DOM 操作和与外部库集成。
3. Unmounting(卸载阶段):
- componentWillUnmount:组件从 DOM 中移除之前调用,用于清理定时器、取消订阅等操作。
4. Error Handling(错误处理阶段):
- static getDerivedStateFromError:当子组件抛出错误时被调用,返回一个新的状态值。
- componentDidCatch:当子组件抛出错误时被调用,用于记录错误信息或发送错误报告。
需要注意的是,React 16.3 之前的版本还包括一些已被废弃的生命周期方法,如 componentWillMount、componentWillReceiveProps 等。在最新版本的 React 中,推荐使用新的生命周期方法替代这些废弃的方法。
阅读全文