【React】react学习笔记08-生命周期

原创已于 2022-01-27 16:40:53 修改 · 302 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #前端

于 2019-10-01 10:34:22 首次发布

React 专栏收录该内容

18 篇文章

订阅专栏

本文深入讲解React组件的生命周期方法，包括componentWillMount、componentDidMount等关键阶段的作用及调用时机，帮助读者理解如何有效利用这些方法进行组件状态管理和优化。

记录一些基本的资料，生命周期这种东西在项目中会有很深刻的体会的，所以没必要死记硬背~

常见的方法：

- componentWillMount 在渲染前调用,在客户端也在服务端。
- componentDidMount : 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异步操作阻塞UI)。
- componentWillReceiveProps 在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。
- shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。
  可以在你确认不需要更新组件时使用。
- componentWillUpdate在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。
- componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用。
- componentWillUnmount在组件从 DOM 中移除之前立刻被调用。

调用顺序：：

根据版本会有细微调整：React lifecycle methods diagram

1、生命周期时序图：

2、初始化顺序测试

代码：

<!DOCTYPE html><html>
<head>
    <meta charset="utf-8" />
    <title>React Tutorial</title>

</head>
<body>
    <!--react基础库-->
       <!--react基础库-->
      <script src="https://cdn.bootcss.com/react/16.8.6/umd/react.development.js"></script>
    <script src="https://cdn.bootcss.com/react-dom/16.8.6/umd/react-dom.development.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.js"></script>

    <div id="content"></div>

    <script type="text/babel">
        //定义组件
        class Component extends React.Component{
            //构造函数，在初始化组件的时候会执行
              constructor(props){
                  console.log('constructor()')
                  super(props);
                  this.state={
                  }
              }

              render(){
                  console.log('render()')
                  return(
                      <div>
                          <p>顺序测试</p>
                      </div>
                  );
              }
            componentWillMount(){
                console.log('componentWillMount()')
            }
            componentDidMount(){
                console.log('componentDidMount()')
            }

        }

        ReactDOM.render(<Component />,document.getElementById("content"));


    </script>


</body>
</html>

执行结果：

3、state更新测试：

过程：略

结论：更新state会触发render（）

详细信息：

最权威的offical website：React.Component – React

特别注意：

这个错误刚犯过，记录一下：

避免将 props 的值复制给 state！这是一个常见的错误：

constructor(props) {
 super(props);
 // 不要这样做
 this.state = { color: props.color };
}

如此做毫无必要（你可以直接使用 this.props.color），同时还产生了 bug（更新 prop 中的 color 时，并不会影响 state）。