React组件生命周期

时间：2016-04-05 17:49:32 阅读：163 评论：0 收藏：0 [点我收藏+]

标签：

什么是生命周期？

组件本子上是状态机，输入确定，输出一定确定。
状态发生转换时会触发不同的钩子函数，从而让开发者有机会做出响应
可以用事件的思路来理解状态。组件可以处于不同的状态中。
初始化阶段————运行中阶段————销毁阶段
初始化阶段能够使用的钩子函数(按照触发顺序)：
getDefaultProps(获取实例的默认属性)————只有第一次实例的时候调用
getInitialState(获取实例的初始状态)
componentWillMount(组件即将被渲染到页面)
render(组件在render中生成虚拟的DOM节点,即JSX,最后由React生成真实的DOM节点)
componentDidMount(组件被渲染到页面之后)
运行中阶段能够使用的钩子函数(按照触发顺序)：
componentWillReceiveProps(组件快要接收到属性时触发)
shouldComponentUpdate(组件接收到新状态时，是否需要更新，返回false,React就不会更新，可以提高性能)
componentWillUpdate()
render
componentDidUpdate(在组件被渲染到页面之后调用)
销毁中阶段能够使用的钩子函数(按照触发顺序)：
componentWillUnmount(在销毁操作执行之前触发)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="Keywords" content="关键词一，关键词二">
    <meta name="Description" content="网站描述内容">
    <meta name="Author" content="刘艳">
    <title></title>
</head>
<body>
    <div id = "example"></div>
</body>
</html>
<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
<script src="build/browser.min.js"></script>
<script type="text/babel">
    var HelloMessage = React.createClass({
        getDefaultProps: function () {

        },
        getInitialState: function(){
            return {liked: false}
        },
        componentWillMount: function(){
            console.log("Component will mount");
        },
        render: function(){
            return <p ref = "one">Hello, {
                (function(obj){
                    if(obj.props.name){
                        return obj.props.name;
                    }else{
                        return "Message"
                    }
                })(this)}</p>

        },
        compontentDidMount: function(){}

    });
    ReactDOM.render(<HelloMessage></HelloMessage>, document.querySelector("#example"));
</script>

初始化阶段介绍

getDefaultProps——只调用一次，实例之间共享引用(属性)
即使没有生成实例，也会调用，在createClass时，就会被调用
getInitialState——初始化每个实例特有的状态
必须返回一个Object或者是Null
componentWillMount——render之前最后一次修改状态的机会
render——只能访问this.props和this.state,不应再访问其它信息，只有一个顶层组件，但是可以有子组件，不允许修改状态和DOM输出。
如果render需要修改状态和DOM输出，那么render就不能在服务端使用。并且，如果在render中修改状态和DOM输出，会使得代码逻辑变得复杂。所以，要尽可能避免这样做。
componentDidMount——成功render并渲染完成真实DOM之后触发，可以修改DOM

操作真正的DOM节点:this.refs.XXX

var Zoo = React.createClass({  
  render: function() {    
     return <div>Giraffe name: <input ref="giraffe" /></div>;
  },
  showName: function() {  
        // 之前：     
    var input = this.refs.giraffe.getDOMNode(); 
        // v0.14 版：     
    var input = this.refs.giraffe;     
    alert(input.value);
  }
});

需要注意的是，如果你给自定义的 React 组件（除了 DOM 自带的标签，如 div、p 等）添加 refs，表现和行为与之前一致。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="Keywords" content="关键词一，关键词二">
    <meta name="Description" content="网站描述内容">
    <meta name="Author" content="刘艳">
    <title></title>
</head>
<body>
    <div id = "example"></div>
</body>
</html>
<script src="build/jquery-1.11.2.min.js"></script>
<script src = "build/react.js"></script>
<script src = "build/react-dom.js"></script>
<script src = "build/browser.min.js"></script>
<script type = "text/babel">
    var count = 0;
    var HelloMessage = React.createClass({
        getDefaultProps: function () {
            return {name: "Yvette"};
        },
        getInitialState: function(){
            return {myCount: count++,
                    ready: false}
        },
        componentWillMount: function(){
            this.setState({ready: true})
        },
        render: function(){
            return <p ref = "one">Hello, {this.props.name ? this.props.name : "Message"} <br/>
                    {+ this.state.ready}&nbsp;{this.state.myCount}</p>

        },
        componentDidMount: function(){
            $(this.refs.one).append("<span>future</span>");
        }
    });
    ReactDOM.render(<div><HelloMessage></HelloMessage><HelloMessage></HelloMessage></div>, document.querySelector("#example"));
</script>

技术分享

运行中阶段介绍

componentWillReceiveProps:父组件修改属性触发,可以修改新属性、修改状态。
在修改发生之前出发。在属性真正比传送到组件之前,对其进行处理。
shouldComponentUpdate:返回false会阻止render调用,后面的函数都不会执行。
componentWillUpdate:不能修改属性和状态
render:只能访问this.props和this.state,不应再访问其它信息，只有一个顶层组件，但是可以有子组件，不允许修改状态和DOM输出。
componentDidUpdate:可以修改DOM

销毁阶段介绍

componentWillUnmount:在组件真正被销毁前调用，在删除组件之前进行清理操作，如计时器和事件监听器。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="Keywords" content="关键词一，关键词二">
    <meta name="Description" content="网站描述内容">
    <meta name="Author" content="刘艳">
    <title></title>
</head>
<body>
<div id = "example"></div>
</body>
</html>
<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
<script src="build/browser.min.js"></script>
<script type="text/babel">
    var style = {
        color: "red",
        border: "1px solid #000"
    };
    var HelloWorld = React.createClass({
        render: function(){
            return <p>Hello, {this.props.name ? this.props.name : "World"}</p>;
        },
        componentWillUnmount: function(){
            console.log("I will unmount");
        }

    });
    var HelloUniverse = React.createClass({
        getInitialState: function(){
            return {name: "Yvette"};
        },
        handleChange: function (event) {
            if(event.target.value == "123"){
                React.unmountComponentAtNode(document.querySelector("#example"))
                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>
            );
        }
    });
    ReactDOM.render(<div style = {style}><HelloUniverse></HelloUniverse></div>,document.querySelector("#example"));
</script>

在input中输入123，可以触发componentWillUnmount事件。
使用React.unmountComponentAtNode(para);//传入的参数必须是装载时的节点，即ReactDOM.render()的第二个参数。
除了上面的方法外，还可以在render中写判断，如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="Keywords" content="关键词一，关键词二">
    <meta name="Description" content="网站描述内容">
    <meta name="Author" content="刘艳">
    <title></title>
</head>
<body>
    <div id = "example"></div>
</body>
</html>
<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
<script src="build/browser.min.js"></script>
<script type="text/babel">
    var style = {
        color: "red",
        border: "1px solid #000"
    };
    var HelloWorld = React.createClass({
        render: function(){
            return <p>Hello, {this.props.name ? this.props.name : "World"}</p>;
        },
        componentWillUnmount: function(){
            console.log("I will unmount");
        }
    });
    var HelloUniverse = React.createClass({
       getInitialState: function(){
           return {name: "Yvette"};
       },
       handleChange: function (event) {
           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>
           );
       }
    });
    ReactDOM.render(<div style = {style}><HelloUniverse></HelloUniverse></div>,document.querySelector("#example"));
</script>

React组件生命周期

标签：

原文地址：http://blog.csdn.net/liuyan19891230/article/details/51065032

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行