一般来说，一个组件类由 extends Component 创建，并且提供一个 render 方法以及其他可选的生命周期函数、组件相关的事件或方法来定义
getInitialState （es5）
初始化 this.state 的值，只在组件装载之前 调用一次 。
如果是使用 ES6 语法，可以在构造函数 construcror 中初始化state的值。例如：
class Home extends React.Component {
constructor(props){
super(props);
//初始化state
this.state = {
show:false
}
}
}
getDefaultProps （es5）
该方法只在组件创建时 调用一次 并缓存返回的对象（即在 React.createClass 之后就会调用）。
初始化this.props的值，即在组件装载后，缓存的结果会用来保证 父组件还没传入属性的值时，访问 this.props 的属性，也是有值的。
因在实例初始化之前调用的，故不能使用this获取到实例。
如果是使用 ES6 语法，可以直接定义 defaultProps 这个类属性来初始化props
Home.defaultProps = { initialCount: 0 };
componentWillMount
在首次渲染之前调用，而且 只调用一次。
这里可以修改state，也是在 render 方法调用之前修改 state 的最后一次机会，不会导致重新渲染（state或者props发生改变并不会触发）。
也可以做 异步请求数据ajax/fetch（但不建议，因为DOM还没有渲染，个时候的一些DOM操作就会出错）。
此处如更改state会在render()渲染时才能获取修改后的state
render
渲染组件
这是 唯一必须 的方法：创建虚拟DOM
- 只能通过 this.props 和 this.state 访问数据（不能修改）
- 可以返回 null,false 或者任何React组件
- 只能出现一个顶级组件，不能返回一组元素
- 不能改变组件的状态
- 不能修改DOM的输出
render方法返回的结果并不是真正的DOM元素，而是一个虚拟的表现，类似于一个DOM tree的结构的对象。react之所以效率高，就是这个原因。
componentDidMount
初始化渲染后只调用一次，这时可以获取相应的DOM节点。
这里可以挂载一些其他的插件之类的，也可以执行异步请求；一般 建议在componentDidMount中异步请求数据
componentWillReceiveProps(nextProps)
初始化渲染不会调用，组件在接受到新的props时调用，nextProps是接受到的新的props，可以通过this.props获取老的props。例如：当父组件传入新的props的时候可以在此做些简单的处理
componentWillReceiveProps(nextProps){
let params = this.params;
let nextParams = nextProps.params;
if (params.sub !== nextParams.sub){
//简单的逻辑处理
}
}
shouldComponentWillUpdate
初始化渲染不会调用，接收到新的props或state时调用
componentWillUpdate
初始化渲染不会调用，更新前调用。组件渲染前执行，接受新的props、state或者调用forceUpdate()
componentDidUpdate
初始化渲染不会调用，更新后调用。组件每次渲染都会执行，可以获取相应的DOM节点
componentWillUnmount
组件被卸载的时候调用。
在componentDidMount 中添加的任务都需要在该方法中撤销，如创建的定时器、事件监听器或断开socket
一般在componentDidMount里面注册的事件需要在这里删除
每次使用this.setState 修改state时，会依次调用：
* shouldComponentUpdate
* componentWillUpdate
* render
* componentDidUpdate
调用setState(setState并不是一个同步的方法，可以理解为异步)后，立刻获取的值，仍然是老值，需要在render的时候才能获取修改后的新值；如果想setState后获取到更新的值，可以放在回调里；比如：
this.setState({
show:true
},function(){
console.log(this.state.show) //true
})
网友评论