一般来说,一个组件类由 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
})