React 中的每个组件都有三个阶段，这三个阶段构成了组件完整的生命周期。组件的生命周期为初始化→运行中→销毁，每个阶段都可以有开发者自定义的函数，执行不同的行为。下面介绍不同阶段的特点、不同阶段可以触发的函数以及触发条件。
初始化阶段介绍
getDefaultProps：只调用一次，实例之间共享引用
getInitialState：初始化每个实例特有的状态
componentWillMount：render之前最后一次修改状态的机会
componentDidMount：成功render并渲染完成真实DOM之后触发，可以修改DOM
<!DOCTYPE html>
<html lang="zh-cn" <head>
<Meta charset="UTF-8" <title>react dom dangerouslySetInnerHTML</title>
<script src="../build/react.js"></script>
"../build/react-dom.js""../build/browser.min.js""../build/jquery.min.js" </head>
<body>
type="text/babel" var count = 0;
var HelloWorld = React.createClass({
getDefaultProps: function () {
console.log("getDefaultProps,1") return {name: "Tom"} },
getInitialState: "getInitialState,2")myCount: ++countready: false} componentWillMount: "componentWillMount,3") this.setState({true}) render: "render,4") return <p ref="childp">Hellothis.props.name ? this.props.name : "World"}<br/>{"" + this.state.ready} {myCount}</p>;
componentDidMount: "componentDidMount,5") $(ReactDOM.findDOMNode(this)).append("surprise!") }) ReactDOM.render(<div><HelloWorld></HelloWorld><br/><HelloWorld></HelloWorld></div>document.body) </script>
</body>
</html>
getDefaultProps,1
getInitialState,2
componentWillMount,3
render,4
getInitialState,4
2次componentDidMount,5
运行中阶段介绍
这个阶段可以触发四个函数：
shouldComponentUpdate：返回false会阻止render调用
componentDidUpdate：可以修改DOM
<script componentWillReceiveProps: function (newProps) {
console."componentWillReceiveProps 1")log(newProps) } shouldComponentUpdate: "shouldComponentUpdate 2") return true componentWillUpdate: "componentWillUpdate 3") render: "render 4")p>Hello"World"}</ componentDidUpdate: function() {
$( }) var HelloUniverse = getInitialState: function () {
''} handleChange: function (event) {
name: event.target.value}) return <div>
<HelloWorld name={this.state.name}></HelloWorld>
<br/>
<input type="text" onChange={this.handleChange} />
</div>
} ReactDOM.render(<div><HelloUniverse></HelloUniverse></div>;
</script>
render 4
componentWillReceiveProps 1
Object {name: "1"}
shouldComponentUpdate 2
componentWillUpdate 3
render 4
销毁阶段介绍
这个阶段可以触发一个函数：
componentWillUnmount：在删除组件之前进行清理操作，比如计时器和事件监听器
createClass({
render: //在删除组件之前进行清理操作，比如计时器和事件监听器
componentWillUnmount: "clear HelloWorld!") if (event.value == "123") {
ReactDOM.unmountComponentAtNode(document.getElementsByTagName("body")[0]) return }
</script>