React组件生命周期详解

最新推荐文章于 2024-08-04 13:48:08 发布

u013063153

最新推荐文章于 2024-08-04 13:48:08 发布

阅读量1.8k

点赞数

分类专栏： React

本文链接：https://blog.csdn.net/u013063153/article/details/52494201

版权

React 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

一、组件的生命周期介绍

组件的本质是状态机，输入确定，输出一定确定。

状态发生转换时会触发不同的钩子函数，从而让开发者有机会做出响应。

可以使用事件的思路来理解状态。

组件的生命周期：

1.初始化阶段

getDefaultProps

getInitialState:

componentWillMount

render

componentDidMount

2.运行中阶段

componentWillReceiveProps

shouldComponentUpdate

componentWillUpdate

render

componentDidUpdate

3.销毁阶段

componentWillUnmount

二、初始化阶段函数介绍

初始化阶段可以使用的函数：

getDefaultProps:只调用一次，实例之间共享引用

getInitialState: 初始化每个实例特有的状态

componentWillMount:render之前最后一次修改状态的机会

render:只能访问this.props和this.state，只有一个顶层组件，不允许修改状态和DOM输出

componentDidMount:成功render并渲染完成真实DOM之后触发，可以修改DOM

<!DOCTYPE html>
<html lang="zn-cn">
<head>
    <meta charset="UTF-8">
    <title>React</title>
</head>
<body>
<script src="./jquery.min.js"></script>
<script src="./build/react.js"></script>
<script src="./build/JSXTransformer.js"></script>
<script type="text/jsx">
    $(doucument).ready(
        function () {
            var count = 0;
            var style={
                color:"red",
                border:"1px solid #000"
            };

            var rawHTML = {
                _html:"<h1>I'm inner HTML</h1>"
            };

            var HelloWorld = React.createClass({
                getDefaultProps:function () {
                    console.log("getDefaultProps,1");
                    return {name:"Tom"};
                },
                getInitialState:function () {
                    console.log("getInitialState,2");
                    return {
                        myCount:count++,
                        ready:false
                    };
                },
                componentWillMount:function () {
                    console.log("componentWillMount,3");
                    this.setState({ready:true})
                },
                render:function () {
                    console.log("render,4");
                    return <p ref="childp">Hello,{this.props,name?this.props.name:"world"}<br/>{this.state.ready}{this.state.myCount}</p>;
                },
                componentDidMount:function () {
                    console.log("componentDidMount,5");
                    $(React.findDOMNode(this)).append("surprise!");
                }
            });
            React.render(<div style={style}><HelloWorld></HelloWorld><br/><HelloWorld></HelloWorld></div>,document.body);
        }
    );
</script>
</body>
</html>

三、运行中阶段函数介绍

运行中阶段可以使用的函数：

componentWillReceiveProps:父组件修改属性触发，可以修改新属性、修改状态

shouldComponentUpdate:返回false会阻止render调用

componentWillUpdate:不能修改属性和状态

render:只能访问this.props和this.state，只有一个顶层组件，不允许修改状态和DOM输出

componentDidUpdate:可以修改DOM

<!DOCTYPE html>
<html lang="zn-cn">
<head>
    <meta charset="UTF-8">
    <title>React</title>
</head>
<body>
<script src="./build/react.js"></script>
<script src="./jquery.min.js"></script>
<script src="./build/JSXTransformer.js"></script>
<script type="text/jsx">
    $(document).ready(
      function () {
          var style={
              color:"red",
              border:"1px solid #000"
          };

          var HelloWorld = React.createClass({
              componentWillReceiveProps:function () {
                  console.log("componentWillReceiveProps,1");
                  console.log(newProps);
              },
              shouldComponentUpdate:function () {
                  console.log("shouldComponentUpdate,2");
                  return true;
              },
              componentWillUpdate:function () {
                  console.log("componentWillUpdate,3");
              },
              render:function () {
                  console.log("render,4");
                  return <p>Hello,{this.props.name?this.props.name:"World"}</p>;
              },
              componentDidUpdate:function () {
                  console.log("componentDidUpdate,5");
              }
          });

          var HelloUniverse = React.createClass({
              getInitialState:function () {
                  return {name:""}
              },
              handleChange:function () {
                  this.setState({name:event.target.value})
              },
              render:function () {
                  return (
                          <div>
                              <HelloWorld name={this.state.name}></HelloWorld>
                              <br/>
                              <input type="text" onChange={this.handleChange}/>
                          </div>
                  )
              }
          });
          React.render(<div style={style}><HelloUniverse></HelloUniverse></div>,document.body);
      }      
    );
    
</script>
</body>
</html>

四、销毁阶段函数介绍

销毁阶段可以使用的函数：

componentWillUnmount:在删除组件之前进行清理操作，比如计时器盒事件监听器

<!DOCTYPE html>
<html lang="zn-cn">
<head>
    <meta charset="UTF-8">
    <title>React</title>
</head>
<body>
<script src="./build/react.js"></script>
<script src="./build/JSXTransformer.js"></script>
<script type="text/jsx">
    var style={
        color:"red",
        border:"1px solid #000"
    };

    var HelloWorld = React.createClass({
        render:function () {
            console.log("render,4");
            return <p>Hello,{this.props.name?this.props.name:"World"}</p>;
        },
        componentWillUnmount:function () {
            console.log("Boooooooooooom!");
        }
    });

    var HelloUniverse = React.createClass({
        getInitialState:function () {
            return {name:""}
        },
        handleChange:function () {
            this.setState({name:event.target.value})
        },
        render:function () {
            if(this.state.name == "123")
                return <div>123</div>
            return (
                    <div>
                        <HelloWorld name={this.state.name}></HelloWorld>
                        <br/>
                        <input type="text" onChange={this.handleChange}/>
                    </div>
            )
        }
    });
    React.render(<div style={style}><HelloUniverse></HelloUniverse></div>,document.body);
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="zn-cn">
<head>
    <meta charset="UTF-8">
    <title>React</title>
</head>
<body>
<script src="./build/react.js"></script>
<script src="./build/JSXTransformer.js"></script>
<script type="text/jsx">
    var style={
        color:"red",
        border:"1px solid #000"
    };

    var HelloWorld = React.createClass({
        render:function () {
            console.log("render,4");
            return <p>Hello,{this.props.name?this.props.name:"World"}</p>;
        },
        componentWillUnmount:function () {
            console.log("Boooooooooooom!");
        }
    });

    var HelloUniverse = React.createClass({
        getInitialState:function () {
            return {name:""}
        },
        handleChange:function () {
            if(event.target.value == "123"){
                React.unmountComponentAtNode(document.getElementsByTagName("body")[0]);
                return;
            }
            this.setState({name:event.target.value})
        },
        render:function () {
            return (
                    <div>
                        <HelloWorld name={this.state.name}></HelloWorld>
                        <br/>
                        <input type="text" onChange={this.handleChange}/>
                    </div>
            )
        }
    });
    React.render(<div style={style}><HelloUniverse></HelloUniverse></div>,document.body);
</script>
</body>
</html>