[React]组件的生命周期

组件的生命周期

组件本质上是伏态机，输入确定，输出一定确定。

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

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

初始化->运行中->销毁

初始化

getDefaultProps(只会在第一个实例初始化时被调用)->getInitialState->componentWillMount->render->componentDidMount

运行中

componentWillReceiveProps->shouldComponentUpdate->componentWillUpdate->render->componentDidUpdate

销毁

componentWillUnmount

初始化阶段

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

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

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

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

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

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

实例演示：

var style = {
color: "red",
border: "1px solid #000",
};

var HelloWorld = React.createClass({
getDefaultProps: function () {
console.log('getDefaultProps, 1')
},
getInitialState: function () {
console.log('getInitialState, 2');
return null;
},
componentWillMount: function () {
console.log('componentWillMount, 3');
},
render: function () {
console.log('render, 4');
return <p ref="childp">Hello, {(function (obj) {
if (obj.props.name) {
return obj.props.name;
} else {
return "World";
}
})(this)}</p>;
},
componentDidMount: function () {
console.log('componentDidMount, 5');
}
});
ReactDOM.render(<div style={style}><HelloWorld></HelloWorld></div>, document.body)

$(function () {
var count = 0;
var style = {
color: "red",
border: "1px solid #000",
};

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 + count}</p>;
},
componentDidMount: function () {
console.log('componentDidMount, 5');
$(ReactDOM.findDOMNode(this)).append('surprise!');
}
});
ReactDOM.render(<div style={style}><HelloWorld></HelloWorld><br/><HelloWorld></HelloWorld></div>, document.body);
})();

运行中阶段

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

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

- shouldComponentUpdate: 返回false会阻止render调用

- componentWillUpdate: 不能合修改属性和状态

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

- componentDidUpdate: 可以修改DOM

实例演示:

var style = {
color: "red",
border: "1px solid #000",
};

var HelloWorld = React.createClass({
componentWillReceiveProps: function () {
console.log('componentWillReceiveProps 1');
},
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 (event) {
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.body);

父组件改变子组件的属性：

$(document).ready(function() {
var style = {
color: "red",
border: "1px solid #000",
};

var HelloWorld = React.createClass({
componentWillReceiveProps: function (newProps) {
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');
$(ReactDOM.findDOMNode(this)).append('surprise!');
},
});
var HelloUniverse = React.createClass({
getInitialState: function () {
return {name: ''};
},
handleChange: function (event) {
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.body);
});

销毁阶段

$(document).ready(function() {
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("BOOOOOOOOOOOOOOOOOOOOOM!");
},
});
var HelloUniverse = React.createClass({
getInitialState: function () {
return {name: ''};
},
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.body);
});

上面示例中，一开始生成HelloWorld组件，先生成HelloWorld组件，当我们输入123，生成
123，相当于删除了HelloWoorld组件。

$(document).ready(function () {
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("BOOOOOOOOOOOOOOOOOOOOOM!");
},
});
var HelloUniverse = React.createClass({
getInitialState: function () {
return {name: ''};
},
handleChange: function (event) {
if (event.target.value == "123") {
ReactDOM.unmountComponentAtNode(document.getElementsByTagName('body')[0]);  //参数为render时第二个参数节点，即下面的body
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.body);
});

上面示例值接删除了该DOM节点。