实例化
当组件在客户端被实例化,第一次被创建时,以下方法被调用:
1. getDefaultProps
只调用一次,用于设置 props 的值。
2. getInitialState
只调用一次,用于初始化每个实例的 State,在该方法里可以访问组件的porps。
如果使用ES6的语法,可以在构造函数中初始化状态
如:constructor (props)
3. componentWillMount
在首次渲染前调用,也是在render加载前最后一次修改 state 的机会。
4. render
该方法会创建一个虚拟Dom,用来表示组件的输出
且只能通过 this.state 和 this.props 访问数据
可以返回 null、false 或 任何react组件
只能出现一个顶级组件,不能返回一组元素
5. componentDidMount
该组件不会在服务端渲染的过程中调用
调用时,真实的Dom已经生成
可通过 this.getDOMNode() 或 this.findDOMNode()
示例:
var Area = React.createClass({
render: function(){
this.getDOMNode()
//render调用时,组件未挂载,这里将报错
return <canvas ref='mainCanvas'>
},
componentDidMount: function(){
var canvas = this.refs.mainCanvas.getDOMNode();
//这是有效的,可以访问到 Canvas 节点
}
})
存在期
当组件渲染好,且用户已经可以进行交互(如点、触),可改变应用状态时,下面的方法会被依次调用
1. componentWillReceiveProps
父组件更改 props 时被调用
可在该方法内更新State,而触发 render 方法重新渲染组件
示例:
componentWillReceiveProps: function (nextProps) {
if (nextProps.checked !== undefined) {
this.setState({
checked: nextProps.checked
})
}
}
2. shouldComponentUpdate
若确定组件的 props 或者 state 的改变不需重新渲染
可用该方法返回 false 来阻止事件的重新渲染
之后便不会执行 render 以及后面的 componentWillMount 和 componentDidUpdate
react.PureComponent 才有该方法
3. componentWillUpdate
和 componentWillMount 类似
组件接受到 props 或者 state 即将重新渲染前
会对以下形式方法进行调用
componentWillUpdate(object nextProps, object nextState)
使用此方法时切勿修改 props 和 state
4. componentDidUpdate
和 componentDidMount 类似
组件将要重新渲染前,会对以下形式方法进行调用
componentDidUpdate(object prevProps, object prevState)
在这里可以访问并修改DOM
销毁时
1. componentWillUnmount
每当 react 用完一个组件,这个组件必须从DOM中卸载并销毁
此时该方法会被执行,完成所有的清理和销毁工作
在 componentDidMount 中添加的任务都需要在该方法中撤销
如创建的 定时器 或事件监听器