react的生命周期_reacat 在didmount获取数据在处理-CSDN博客

React组件其实就是一个状态机，他接受两个输入参数，this.props和this.state，返回一个虚拟的DOM.

React组件的生命周期分几个阶段，每个阶段会有若干个回调函数可以响应不同的时刻。

状态机就是输入确定输出一定确定。

生命周期的三个阶段，三者时间是不固定的，只是在逻辑上的分类。

--------初始化阶段：

1. getDefaultProps：获取实例的默认属性（就是没有生成实例，组件的第一个实例呗初始化CreateClass的时候调用，，只调用一次）

var Long = React.createClass({

render: function(){}

});

在React组件中是有类和实例的区别的，通过React.createClass创建的是类也就是说 Long 是一个类，在被一个回调getDefaultProps调用，这个函数会返回一个对象，这个对象会以引用的方式被所有的实例共享，是引用。。。。

当Reacat.createClass创建完类之后就可以进行实例化，，

实例化一个类：：：

getlnitialState ：获取this.state的默认值

componentWillMount: 在render之前调用此方法。在render之前需要做的事情就在这里处理。

render : 渲染并返回一个虚拟的DOM

componentDidMount：在render之后，react会使用render返回的虚拟DOM来创建真是的DOM完成之后调用。

其中需要之一的是：：：：

1 this.state只存储原始数据，不要存储计算后的数据。

2 componentWillMount用来处理render之前的逻辑，不能再render中处理业务逻辑。

其实render就是一个模板的作用，他只是处理和展示相关的逻辑，如果是业务逻辑，那么要放在componentWillMount中执行。

所以在render中一定不会出现改变state之类的操作

3 render 返回的是一个虚拟的DOM

所谓的虚拟的DOM，其实就是ReactDOM的一个实例，他就是一个js对象。render方法完成之后。。。真是的DOM其实并不存在

4 componentDidMount中处理和真是DOM相关的逻辑

那么这个时候真实的DOM已经被渲染出来，可以通过this.getDOMNode()方法来使用了

典型的场景就是在这里可以使用jquery插件

三更新也就是运行中的状态

当组件实例化完成，就会进入存在期，这个时候一般会响应用户操作和父组件的更新来更新组件

componentWillRecieveProps: 父组件或者通过组件的实例调用setProps改变当前组件的props时调用

shouldComponentUpdate: 是否需要更新（可以返回false，接收数据后不更新，阻止render调用，后面的函数不会被继续执行）

render ：只访问this.props和this.state;只有一个顶层组件，也就是说render返回只能是一个组件，不允许修改状态和DOM输出

componentDidUpdate：真实的DOM已经完成更新。

四销毁阶段

componentWillUnmount: 开发者需要来销毁（组件真正删除之前调用，比如计时器和事件监听器）

初始化阶段的测试：

//注意这里的getInitialState返回的只能是obj或者null

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="https://github.com/es-shims/es5-shim/blob/master/es5-shim.js"></script>
<script type="text/javascript" src="../build/react.js"></script>
<script type="text/javascript" src="../build/react-dom.js"></script>
<script type="text/javascript" src="../build/browser.min.js"></script>
<title>react初始化阶段的生命周期</title>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
var style = {
color : "red",
border : "1px red solid"
};
var TextClass = React.createClass({
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="https://github.com/es-shims/es5-shim/blob/master/es5-shim.js"></script>
<script type="text/javascript" src="../build/react.js"></script>
<script type="text/javascript" src="../build/react-dom.js"></script>
<script type="text/javascript" src="../build/browser.min.js"></script>
<title>react初始化阶段的生命周期</title>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
var style = {
color : "red",
border : "1px red solid"
};
var TextClass = React.createClass({
getInitialState : function(){
console.log("getInitialState,2");
return {}
},

getDefaultProps:function(){
console.log("getDefaultProps,1");
},

componentWillMount:function(){
console.log("componentWillMount,3");
},
render : function(){
console.log("render ,4");
return (<p>Hello {(function (obj){
if(obj.props.name){
return obj.props.name
}else{
return "long";
}
})(this)}</p>);
},
componentDidMount : function (){
console.log("componentDidMount ,5");
}
});
ReactDOM.render(
<div style={style}><TextClass></TextClass></div>,
document.getElementById("app")
)
</script>
</body>
</html>

运行中

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

<script type="text/javascript" src="../build/react.js"></script>
<script type="text/javascript" src="../build/react-dom.js"></script>
<script type="text/javascript" src="../build/browser.min.js"></script>
<title>react初始化阶段的生命周期</title>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
var style = {
color : "red",
border : "1px solid red"
};
var TextClass = React.createClass({
componentWillReceiveProps : function(newProps){
console.log("componentWillReceiveProps , 3");
console.log(newProps);
},
shouldComponentUpdate : function(){
console.log("shouldComponentUpdate , 4");
return true
},
render : function(){
console.log("render ,2");
return (<p> hello {this.props.name ? this.props.name : "long"}</p>);
},
componentDidUpdate : function(){
console.log("componentDidUpdate , 5");
}
});
var TextSourceClass = React.createClass({
getInitialState : function(){
console.log("getInitialState ,1")
return {name :''};
},
againChange : function(event){
this.setState({name : event.target.value})
},
render : function(){
return (
<div>
<TextClass name="this.state.name"></TextClass><br/>
<input type="text" onChange={this.againChange} />
</div>
);
}
});
ReactDOM.render(
<div style={style}><TextSourceClass></TextSourceClass></div>,
document.getElementById("app")
)
</script>
</body>
</html>

销毁阶段

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="../build/react.js"></script>
<script type="text/javascript" src="../build/react-dom.js"></script>
<script type="text/javascript" src="../build/browser.min.js"></script>
<title>销毁阶段</title>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
var style = {
color : "red",
border : "1px solid red"
};
var TextClass = React.createClass({
render : function(){
console.log("render ,4");
return (<p> hello : {this.props.name ? this.props.name : "long"}</p>);
},
componentDidUpdate :function(){
console.log("componentDidUpdate");
}
});
var TextSourceClass = React.createClass({
getInitialState : function(){
return {name:''};
},
againChange : function(name){
this.setState({name : event.target.name});
},
render : function(){
if(this.props.name == "1"){
return <div>123</div>;
}
return (
<div>
<TextClass name={this.state.name}></TextClass><br/>
<input type="text" οnchange={this.againChange} />
</div>
);
}
});
ReactDOM.render(
<div style={style}><TextSourceClass></TextSourceClass></div>,
document.getElementById("app")
)
</script>
</body>
</html>