React组件生命周期

来源：互联网发布：办公楼网络布线图视频编辑：程序博客网时间：2024/05/22 00:41

什么是生命周期？

组件本子上是状态机，输入确定，输出一定确定。
状态发生转换时会触发不同的钩子函数，从而让开发者有机会做出响应
可以用事件的思路来理解状态。组件可以处于不同的状态中。
初始化阶段————运行中阶段————销毁阶段
初始化阶段能够使用的钩子函数(按照触发顺序)：
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>

0 0