Error message here!

Hide Error message here!

忘记密码?

Error message here!

请输入正确邮箱

Hide Error message here!

密码丢失?请输入您的电子邮件地址。您将收到一个重设密码链接。

Error message here!

返回登录

Close

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

黑猫先生 2019-07-10 15:25:00 阅读数:72 评论数:0 点赞数:0 收藏数:0

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

 

常见的方法:

    • componentWillMount 在渲染前调用,在客户端也在服务端。

    • componentDidMount : 在第一次渲染后调用,只在客户端。之后组件已经生成了对应的DOM结构,可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用,可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异步操作阻塞UI)。

    • componentWillReceiveProps 在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。

    • shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。 
      可以在你确认不需要更新组件时使用。

    • componentWillUpdate在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。

    • componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用。

    • componentWillUnmount在组件从 DOM 中移除之前立刻被调用。

 

 

调用顺序:

 

根据版本会有细微调整:http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

1、生命周期时序图:

2、初始化顺序测试

代码:

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

</head>
<body>
    <!--react基础库-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.js"></script>
    <!--bable转换库,ES语法以及Jax语法的转换-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.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:https://react.docschina.org/docs/react-component.html

 

特别注意:

 这个错误刚犯过,记录一下:

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

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

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

 

版权声明
本文为[黑猫先生]所创,转载请带上原文链接,感谢
https://www.cnblogs.com/the-fool/p/11163986.html