react生命周期

最新推荐文章于 2024-04-07 10:15:00 发布

西楚小羽的窝窝

最新推荐文章于 2024-04-07 10:15:00 发布

阅读量625

点赞数 1

分类专栏：前端文章标签：前端 react生命周期

本文链接：https://blog.csdn.net/Victor_Cindy1/article/details/53336273

版权

前端专栏收录该内容

11 篇文章 1 订阅

订阅专栏

<!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>

盗图一张：