十、react生命周期钩子（新）_react 挂载完成后的回调-CSDN博客

本文链接：https://blog.csdn.net/chunxiaqiudong5/article/details/126286938

本文介绍了React组件的生命周期，包括初始化阶段的constructor、getDerivedStateFromProps、render和componentDidMount；更新阶段的getDerivedStateFromProps、shouldComponentUpdate、render、getSnapshotBeforeUpdate及componentDidUpdate；以及卸载组件时的componentWillUnmount。重点强调了render、componentDidMount和componentWillUnmount等重要钩子，并提及了将被废弃的组件生命周期方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.4 生命周期的三个阶段（新）

在这里插入图片描述
1. 初始化阶段
由ReactDOM.render()触发 —— 初次渲染

constructor() —— 类组件中的构造函数
static getDerivedStateFromProps(props, state) 从props得到一个派生的状态【新增】
render() —— 挂载组件
componentDidMount() —— 组件挂载完成比较常用
2. 更新阶段
由组件内部this.setSate()或父组件重新render触发或强制更新forceUpdate()

getDerivedStateFromProps() —— 从props得到一个派生的状态【新增】
shouldComponentUpdate() —— 组件是否应该被更新（默认返回true）
render() —— 挂载组件
getSnapshotBeforeUpdate() —— 在更新之前获取快照【新增】
componentDidUpdate(prevProps, prevState, snapshotValue) —— 组件完成更新
3. 卸载组件
由ReactDOM.unmountComponentAtNode()触发

componentWillUnmount() —— 组件即将卸载
1.5 重要的勾子
render：初始化渲染或更新渲染调用
componentDidMount：开启监听, 发送ajax请求
componentWillUnmount：做一些收尾工作, 如: 清理定时器
1.6 即将废弃的勾子
componentWillMount
componentWillReceiveProps
componentWillUpdate
现在使用会出现警告，下一个大版本需要加上UNSAFE_前缀才能使用，以后可能会被彻底废弃，不建议使用。

react生命周期（新）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ract生命周期(新)</title>
</head>
<body>
   <div id="app"></div> 
    <!-- 加载 React。-->
  <!-- 注意: 部署时，将 "development.js" 替换为 "production.min.js"。-->
  <!--react核心库-->
  <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
  <!--react扩展库 用于支持react操作DOM-->
  <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
  <!--babel 让支持jsx转js-->
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
   <!--用于对组件标签属性进行限制 全局会多一个对象PropTypes-->
   <script src="https://unpkg.c