React学习笔记---组件的生命周期_at lazyinitializer (react.development.js:1363:1) a-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_41880073/article/details/122049119

这篇博客详细介绍了React组件的生命周期，包括16.x和17.x版本的区别。在16.x中，初始化涉及constructor、componentWillMount、render和componentDidMount，更新阶段包括shouldComponentUpdate、componentWillUpdate和componentDidUpdate，卸载阶段主要为componentWillUnmount。17.x版本的变化在于getDerivedStateFromProps的引入。重点强调了render、componentDidMount和componentWillUnmount这三个关键钩子，并提醒了部分生命周期方法已被废弃或将在未来版本中被弃用。

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

一、引出生命周期

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>1_引出生命周期</title>
</head>

<body>
  <!-- 准备好一个“容器” -->
  <div id="test"></div>

  <!-- 引入react核心库 -->
  <script type="text/javascript" src="../js/react.development.js"></script>
  <!-- 引入react-dom，用于支持react操作DOM -->
  <script type="text/javascript" src="../js/react-dom.development.js"></script>
  <!-- 引入babel，用于将jsx转为js -->
  <script type="text/javascript" src="../js/babel.min.js"></script>

  <script type="text/babel">
    //创建组件
    //生命周期回调函数 <=> 生命周期钩子函数 <=> 生命周期函数 <=> 生命周期钩子
    class Life extends React.Component {
     

      state = {
      opacity: 1 }

      death = () => {
     
        //卸载组件
        ReactDOM.unmountComponentAtNode(document.getElementById('test'))
      }

      //组件挂载完毕
      componentDidMount() {
     
        console.log('componentDidMount');
        this.timer = setInterval(() => {
     
          //获取原状态
          let {
      opacity } = this.state
          //减小0.1
          opacity -= 0.1
          if (opacity <= 0) opacity = 1
          //设置新的透明度
          this.setState({
      opacity })
        }, 200);
      }

      //组件将要卸载
      componentWillUnmount() {
     
        //清除定时器
        clearInterval(this.timer)
      }

      //初始化渲染、状态更新之后
      render() {
     
        console.log('render');
        return (
          <div>
            <h2 style={
     {
      opacity: this.state.opacity }}>React学不会怎么办？</h2>
            <button onClick={
     this.death}>不活了</button>
          </div>
        )
      }
    }
    //渲染组件
    ReactDOM.render(<Life />, document.getElementById('test'))
  </script>
</body>

</html>

二、生命周期流程图（旧16.x）

初始化阶段: 由ReactDOM.render()触发—初次渲染
1）constructor()
2）componentWillMount()
3）render()
4）componentDidMount() =====> 常用
一般在这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息
更新阶段: 由组件内部this.setSate()或父组件render触发
1）shouldComponentUpdate()
2）componentWillUpdate()
3）render() =====> 必须使用的一个
4）componentDidUpdate()
卸载组件: 由ReactDOM.unmountComponentAtNode()触发
componentWillUnmount() =====> 常用
一般在这个钩子中做一些收尾的事，例如：关闭定时器、取消订阅消息