React组件生命周期

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

导读：什么是生命周期？组件本子上是状态机，输入确定，输出一定确定。状态发生转换时会触发不同的钩子函数，从而让开发者有机会做出响应可以用事件的思路来理解状态。组件可以处于不同的状态中。初始化阶段————运行中阶段————销毁阶段初始化阶段能够

什么是生命周期？

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

（编辑：李大同）

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