目录
组件的生命周期总体可分成三个状态(文后有关于ES6语法中书写React组件的异同)：
- Mounting：已插入真实 DOM
- Updating：正在被重新渲染
- Unmounting：已移出真实 DOM
生命周期的方法有：
-
componentWillMount 在渲染前调用,在客户端也在服务端。
-
componentDidMount : 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异步操作阻塞UI)。
-
componentWillReceiveProps 在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。
-
shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。
可以在你确认不需要更新组件时使用。 -
componentWillUpdate在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。
-
componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用。
-
componentWillUnmount在组件从 DOM 中移除之前立刻被调用。
具体的调用顺序和方法的归类：
实例化
当首次使用一个组件类时，你回看到下面这些方法依次被调用：
- getDefaultProps
- getInitialState
- componentWillMount
- render
- componentDidMount
改组件类的所有后续应用，你将会看到下面的方法依次被调用。注意，getDefaultProps方法已经不再列表中。
- getInitialState
- componentWillMount
- render
- componentDidMount
存在期
随着应用状态的改变，以及组件逐渐的收到影响，你将会看到下面的方法依次被调用：
- componentWillReceiveProps
- shouldComponentUpdate
- componentWillUpdate
- render
- componentDidUpdate
销毁&清理期
最后当改组价被使用完成后，componentWillUnmout方法将会被调用，目的是给这个实例提供清理自身的机会。
具体到每个方法的细节：
实例化
当组件在客户端被实例化，第一次被创建时，以下方法依次被调用：
1、getDefaultProps
2、getInitialState
3、componentWillMount
4、render
5、componentDidMount
当组件在服务端被实例化，首次被创建时，以下方法依次被调用：
1、getDefaultProps
2、getInitialState
3、componentWillMount
4、render
componentDidMount 不会在服务端被渲染的过程中调用。
getDefaultProps
对于每个组件实例来讲，这个方法只会调用一次，该组件类的所有后续应用，getDefaultPops 将不会再被调用，其返回的对象可以用于设置默认的 props(properties的缩写) 值。
var Hello = React.creatClass({
getDefaultProps: function(){
return {
name: 'pomy',
git: 'dwqs'
}
},
render: function(){
return (
<div>Hello,{this.props.name},git username is {this.props.dwqs}</div>
)
}
});
ReactDOM.render(<Hello />, document.body);也可以在挂载组件的时候设置 props：
var data = [{title: 'Hello'}];
<Hello data={data} />或者调用 setProps （一般不需要调用）来设置其 props：
var data = [{title: 'Hello'}];
var Hello = React.render(<Demo />, document.body);
Hello.setProps({data:data});但只能在子组件或组件树上调用 setProps。别调用 this.setProps 或者 直接修改 this.props。将其当做只读数据。
React通过 propTypes 提供了一种验证 props 的方式，propTypes 是一个配置对象，用于定义属性类型：
var survey = React.createClass({
propTypes: {
survey: React.PropTypes.shape({
id: React.PropTypes.number.isRequired
}).isRequired,
onClick: React.PropTypes.func,
name: React.PropTypes.string,
score: React.PropTypes.array
...
},
//...
})但是这里要注意：React.PropTypes 已经从React v15.5迁移了，所以现在用prop-types库
npm install prop-types -S
关于prop-types的常用类型整理：
import PropTypes from 'prop-types'
MyComponent.propTypes = {
optionalArray: PropTypes.array, // 数组
optionalBool: PropTypes.bool, // bool值
optionalFunc: PropTypes.func, // 函数
optionalNumber: PropTypes.number, // 数值
optionalObject: PropTypes.object, // 对象
optionalString: PropTypes.string, // 字符串
optionalSymbol: PropTypes.symbol, // symbol类型 ES6
optionalNode: PropTypes.node, // 节点
optionalElement: PropTypes.element // 元素
};这里还有值得注意的是，任何复杂的值，比如对象和数组，都会在所有的实例中共享而不是拷贝或者复制。
getInitialState
对于组件的每个实例来说，这个方法的调用有且只有一次，用来初始化每个实例的 state，在这个方法里，可以访问组件的 props。每一个React组件都有自己的 state，其与 props 的区别在于 state只存在组件的内部，props 在所有实例中共享。
getInitialState 和 getDefaultPops 的调用是有区别的，getDefaultPops 是对于组件类来说只调用一次，后续该类的应用都不会被调用，而 getInitialState 是对于每个组件实例来讲都会调用，并且只调一次。
var LikeButton = React.createClass({
getInitialState: function() {
return {liked: false};
},
handleClick: function(event) {
this.setState({liked: !this.state.liked});
},
render: function() {
var text = this.state.liked ? 'like' : 'haven\'t liked';
return (
<p onClick={this.handleClick}>
You {text} this. Click to toggle.
</p>
);
}
});
ReactDOM.render(
<LikeButton />,
document.getElementById('example')
);每次修改 state，都会重新渲染组件，实例化后通过 state 更新组件，会依次调用下列方法：
1、shouldComponentUpdate
2、componentWillUpdate
3、render
4、componentDidUpdate
但是不要直接修改 this.state，要通过 this.setState 方法来修改。
componentWillMount
该方法在首次渲染之前调用，也是再 render 方法调用之前修改 state 的最后一次机会。
render
该方法会创建一个虚拟DOM，用来表示组件的输出。对于一个组件来讲，render方法是唯一一个必需的方法。render方法需要满足下面几点：
-
只能通过 this.props 和 this.state 访问数据（不能修改）
-
可以返回 null,false 或者任何React组件
-
只能出现一个顶级组件（不能返回一组元素）
-
必须纯净，以为这不能改变组将的状态或者修改DOM的输出。
render方法返回的结果并不是真正的DOM元素，而是一个虚拟的表现，React随后会把它和真实的DOM（此处为内存中的的DOM表现，而非浏览器中的）做对比，来判断是否有必要做出修改。react之所以效率高，就是这个原因。
componentDidMount
该方法不会在服务端被渲染的过程中调用。该方法被调用时，已经渲染出真实的 DOM，可以再该方法中通过 this.getDOMNode() 访问到真实的 DOM(推荐使用 ReactDOM.findDOMNode())。这里有介绍获取真实DOM的方法。
var data = [..];
var comp = React.createClass({
render: function(){
return <imput .. />
},
componentDidMount: function(){
$(this.getDOMNode()).autoComplete({
src: data
})
}
})由于组件并不是真实的 DOM 节点，而是存在于内存之中的一种数据结构，叫做虚拟 DOM （virtual DOM）。只有当它插入文档以后，才会变成真实的 DOM 。有时需要从组件获取真实 DOM 的节点，这时就要用到 ref 属性：
var Area = React.createClass({
render: function(){
this.getDOMNode(); //render调用时，组件未挂载，这里将报错
return <canvas ref='mainCanvas'>
},
componentDidMount: function(){
var canvas = this.refs.mainCanvas.getDOMNode();
//这是有效的，可以访问到 Canvas 节点
}
})需要注意的是，由于 this.refs.[refName] 属性获取的是真实 DOM ，所以必须等到虚拟 DOM 插入文档以后，才能使用这个属性，否则会报错。
注意：当React运行在服务器端时，componentDidMount方法不会被调用。
存在期
此时组件已经渲染好并且用户可以与它进行交互，比如鼠标点击，手指点按，或者其它的一些事件，导致应用状态的改变，你将会看到下面的方法依次被调用
1、componentWillReceiveProps
2、shouldComponentUpdate
3、componentWillUpdate
4、render
5、componentDidUpdate
componentWillReceiveProps
组件的 props 属性可以通过父组件来更改，这时，componentWillReceiveProps 将来被调用。可以在这个方法里更新 state,以触发 render 方法重新渲染组件。
componentWillReceiveProps: function(nextProps){
if(nextProps.checked !== undefined){
this.setState({
checked: nextProps.checked
})
}
}shouldComponentUpdate
如果你确定组件的 props 或者 state 的改变不需要重新渲染，可以通过在这个方法里通过返回 false 来阻止组件的重新渲染，返回 `false 则不会执行 render 以及后面的 componentWillUpdate，componentDidUpdate 方法。
该方法是非必须的，并且大多数情况下没有在开发中使用。
shouldComponentUpdate: function(nextProps, nextState){
return this.state.checked === nextState.checked;
//return false 则不更新组件
}componentWillUpdate
这个方法和 componentWillMount 类似，在组件接收到了新的 props 或者 state 即将进行重新渲染前，componentWillUpdate(object nextProps, object nextState) 会被调用，注意不要在此方面里再去更新 props 或者 state。
componentDidUpdate
这个方法和 componentDidMount 类似，在组件重新被渲染之后，componentDidUpdate(object prevProps, object prevState) 会被调用。可以在这里访问并修改 DOM。
销毁&清理期
每当React使用完一个组件，这个组件就必须从DOM中卸载随后被销毁。此时，仅有一个钩子函数会做出相应，完成所有的清理和销毁工作，这很必要。
componentWillUnmount
最后，随着一个组件从它的层级结构中被移除，这个组件的生命也就走到了尽头。此时 componentWillUnmout 会被执行，完成所有的清理和销毁工作，在 componentDidMount 中添加的任务都需要再该方法中撤销，如创建的定时器或添加的事件监听器。
反模式：把计算后的值赋给state
在 getInitialState 方法中，尝试通过 this.props 来创建 state 的做法是一种反模式。
//反模式：经过计算后的值不应该赋给state
getDefaultProps: function(){
return {
data: new Date()
}
},
getInitialState: function(){
return {
day: this.props.date - new Date()
}
},
render: function(){
return <div>Day:{this.state.day}</div>
}经过计算后的值不应该赋给 state，正确的模式应该是在渲染时计算这些值。这样保证了计算后的值永远不会与派生出它的 props 值不同步。
//在渲染时计算值是正确的
getDefaultProps: function(){
return {
data: new Date()
}
},
render: function(){
var day = this.props.date - new Date();
return <div>Day:{day}</div>
}然而，如果你的目的并不是同步，而只是简单的初始化state，那么在getInitialState方法中实用props是没问题的。只是一定要明白你的意图，比如为props添加initial前缀。
getDefaultProps: function(){
return {
initialValue: 'some-default-value'
}
},
getInitialState: function(){
return {
value: this.props.initialValue
}
},
render: function(){
return <div>Day:{this.state.value}</div>
}
创建组件
ES6 class创建的组件语法更加简明，也更符合javascript。内部的方法不需要使用function关键字。
React.createClass
import React from 'react';
const MyComponent = React.createClass({
render: function() {
return (
<div>以前的方式创建的组件</div>
);
}
});
export default MyComponent;React.Component(ES6)
import React,{ Component } from 'react';
class MyComponent extends Component {
render() {
return (
<div>ES6方式创建的组件</div>
);
}
}
export default MyComponent;props propTypes and getDefaultProps
- 使用React.Component创建组件，需要通过在constructor中调用super()将
props传递给React.Component。另外react 0.13之后props必须是不可变的。 - 由于是用ES6 class语法创建组件，其内部只允许定义方法，而不能定义属性，class的属性只能定义在class之外。所以
propTypes要写在组件外部。 - 对于之前的
getDefaultProps方法，由于props不可变，所以现在被定义为一个属性，和propTypes一样，要定义在class外部。
React.createClass
import React from 'react';
const MyComponent = React.createClass({
propTypes: {
nameProp: React.PropTypes.string
},
getDefaultProps() {
return {
nameProp: ''
};
},
render: function() {
return (
<div>以前的方式创建的组件</div>
);
}
});
export default MyComponent;React.Component(ES6)
import React,{ Component } from 'react';
class MyComponent extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div>ES6方式创建的组件</div>
);
}
}
MyComponent.propTypes = {
nameProp: React.PropTypes.string
};
MyComponent.defaultProps = {
nameProp: ''
};
export default MyComponent;State
使用ES6 class语法创建组件，初始化state的工作要在constructor中完成。不需要再调用getInitialState方法。这种语法更加的符合JavaScript语言习惯。
React.createClass
import React from 'react';
const MyComponent = React.createClass({
getInitialState: function() {
return { data: [] };
},
render: function() {
return (
<div>以前的方式创建的组件</div>
);
}
});
export default MyComponent;React.Component(ES6)
import React,{ Component } from 'react';
class MyComponent extends Component {
constructor(props) {
super(props);
this.state = { data: [] };
}
render() {
return (
<div>ES6方式创建的组件</div>
);
}
}
export default MyComponent;this
使用ES6 class语法创建组件， class中的方法不会自动将this绑定到实例中。必须使用 .bind(this)或者 箭头函数 ＝>来进行手动绑定。
React.createClass
import React from 'react';
const MyComponent = React.createClass({
handleClick: function() {
console.log(this);
},
render: function() {
return (
<div onClick={this.handleClick}>以前的方式创建的组件</div>
);
}
});
export default MyComponent;
React.Component(ES6)
import React,{ Component } from 'react';
class MyComponent extends Component {
handleClick() {
console.log(this);
}
render() {
return (
<div onClick={this.handleClick.bind(this)}>ES6方式创建的组件</div>
);
}
}
export default MyComponent;也可以将绑定方法写到constructor中：
import React,{ Component } from 'react';
class MyComponent extends Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
console.log(this);
}
render() {
return (
<div onClick={this.handleClick}>ES6方式创建的组件</div>
);
}
}
export default MyComponent;或者使用箭头函数 => ：
mport React,{ Component } from 'react';
class MyComponent extends Component {
handleClick = () => {
console.log(this);
}
render() {
return (
<div onClick={this.handleClick}>ES6方式创建的组件</div>
);
}
}
export default MyComponent;Mixins
使用ES6语法来创建组件是不支持React mixins的，如果一定要使用React mixins就只能使用React.createClass方法来创建组件了。
import React,{ Component } from 'react';
var SetIntervalMixin = {
doSomething: function() {
console.log('do somethis...');
},
};
const Contacts = React.createClass({
mixins: [SetIntervalMixin],
handleClick() {
this.doSomething(); //使用mixin
},
render() {
return (
<div onClick={this.handleClick}></div>
);
}
});
export default Contacts;总结
总的来说使用ES6来创建组件的语法更加简洁，这种语法避免了过多的React样板代码，而更多的使用纯javascript语法，更符合javascript语法习惯。React官方并没有强制性要求使用哪种语法，根据需要合理的选择即可。
扫一扫
4
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
