react生命周期

发布时间：2020-12-15 05:15:47 所属栏目：百科来源：网络整理

导读：!DOCTYPE htmlhtml head meta charset="utf-8" titleReact Life Cycle/title style .btn { position: relative; display: block; margin-bottom: 10px; font-size: 18px; text-align: center; text-decoration: none; color: #fff; line-height: 2.33333333;

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>React Life Cycle</title>
    <style>
      .btn {
        position: relative;
        display: block;
        margin-bottom: 10px;
        font-size: 18px;
        text-align: center;
        text-decoration: none;
        color: #fff;
        line-height: 2.33333333;
        background-color: green;
      }
    </style>
    <script src="http://cdn.bootcss.com/react/15.3.2/react.min.js"></script>
    <script src="http://cdn.bootcss.com/react/15.3.2/react-dom.min.js"></script>
    <script src="http://cdn.bootcss.com/babel-core/5.8.34/browser.min.js"></script>
  </head>
  <body>
    <div id="container">
      
    </div>
    <script type="text/babel">
      class LifeCycle extends React.Component {
        constructor(props) {
          super(props);
          alert("Initial render");
          alert("constructor");
          this.state = {
            str: "hello"
          };
        }

        componentWillMount() {
          alert("componentWillMount");
          this.setState({
            str: "World"
          })
        }

        componentDidMount() {
          alert("componentDidMount");
        }

        componentWillReceiveProps(nextProps) {
          alert("componentWillReceiveProps");
          this.setState({
            str: "receive props"
          })
        }

        shouldComponentUpdate() {
          alert("shouldComponentUpdate");
          return true
        }

        componentWillUpdate() {
          alert("componentWillUpdate");
        }

        componentDidUpdate() {
          alert("componentDidUpdate");
        }

        componentWillUnmount() {
          alert("componentWillUnmount")
        }

        setTheState() {
          let s = "hello";
          if(this.state.str === s) {
            s = "HELLO";
          }
          this.setState({
            str: s
          });
        }

        forceItUpdate() {
          this.forceUpdate();
        }

        render() {
          alert("render");
          return (
            <div>
              <span>{"Props:"}<h2>{parseInt(this.props.num)}</h2></span>
              <br />
              <span>{"State:"}<h2>{this.state.str}</h2></span>
            </div>
          )
        }
      }

      class Container extends React.Component {
        constructor(props) {
          super(props);
          alert("parent constructor")
          this.state = {
            num: Math.random() * 100
          };
        }

        componentWillMount() {
          alert("parent conponentWillMount")
        }

        componentDidMount() {
          alert("parent componentDidMount");
        }

        componentWillReceiveProps(nextProps) {
          alert("parent componentWillReceiveProps");
        }

        shouldComponentUpdate() {
          alert("parent shouldComponentUpdate");
          return true
        }

        componentWillUpdate() {
          alert("parent componentWillUpdate");
        }

        componentDidUpdate() {
          alert("parent componentDidUpdate");
        }

        componentWillUnmount() {
          alert("parent componentWillUnmount")
        }

        propsChange() {
          this.setState({
            num: Math.random() * 100
          });
        }

        setLifeCycleState() {
          this.refs.rLifeCycle.setTheState();
        }

        forceLifeCycleUpdate() {
          this.refs.rLifeCycle.forceItUpdate();
        }

        unmountLifeCycle() {
          ReactDOM.unmountComponentAtNode(document.getElementById("container"));
        }

        parentForceUpdate() {
          this.forceUpdate();
        }

        render() {
          alert("parent render")
          return (
            <div>
              <a href="javascript:;" className="btn" onClick={this.propsChange.bind(this)}>propsChange</a>
              <a href="javascript:;" className="btn" onClick={this.setLifeCycleState.bind(this)}>setState</a>
              <a href="javascript:;" className="btn" onClick={this.forceLifeCycleUpdate.bind(this)}>forceUpdate</a>
              <a href="javascript:;" className="btn" onClick={this.unmountLifeCycle.bind(this)}>unmount</a>
              <a href="javascript:;" className="btn" onClick={this.parentForceUpdate.bind(this)}>parentForceUpdateWithoutChange</a>
              <LifeCycle ref="rLifeCycle" num={this.state.num}></LifeCycle>
            </div>
          )
        }
      }

      ReactDOM.render(
        <Container></Container>,document.getElementById("container")
      )
    </script>
  </body>
</html>

盗图一张：

第一次进入页面打印结果：

1、parent constructor

2、parent conponentWillMount

3、parent render

4、Initial render constructor

5、componentWillMount

6、render

7、componentDidMount

8、parent componentDidMount

父组件state值改变打印结果：

1、parent shouldComponentUpdate

2、parent componentWillUpdate

3、parent render

4、componentWillReceiveProps

5、shouldComponentUpdate

6、componentWillUpdate

7、render

8、componentDidUpdate

9、parent componentDidUpdate

修改父组件state值打印结果：

1、shouldComponentUpdate

2、componentWillUpdate

3、render

4、componentDidUpdate

调用子组件的强制刷新：（强制刷新不调用shouldComponentUpdate）

1、componentWillUpdate

2、render

3、componentDidUpdate

调用父组件的强制刷新：（强制刷新不调用父组件的parent shouldComponentUpdate，但是调用子组件的shouldComponentUpdate）

1、parent componentWillUpdate

2、parent render

3、componentWillReceiveProps

4、shouldComponentUpdate

5、componentWillUpdate

6、render

7、componentDidUpdate

8、parent componentDidUpdate

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!