Mounting: 已插入真实DOM 指react组件被render解析生成对应的dom节点并插入到浏览器整个过程。
Updating: 正在被重新渲染 指一个已经mounted的react组件被render重新渲染的过程。(每当组件的state值发生变化,都会自动执行Updating这个过程,重新渲染页面)
Unmounting:已移出真实DOM 指一个已经mounted的react组件对应的dom节点被从dom结构移除的过程。
- 对于组件的每一种状态都封装有多个hook函数(相当于监听状态变化以做出事件响应):
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 首先初始化组件默认属性Props
getInitialState 然后初始化组件默认状态State
componentWillMount 再执行render函数渲染页面之前会调用这个函数
render 执行render函数渲染页面
componentDidMount 在Mounting状态结束后调用
var Hello = React.createClass({
getDefaultProps:function(){
alert('initProps');
return{
name:'world222'
};
},
getInitialState:function(){
alert('initState');
return{
color:'red',
fontsize:'12px'
};
},
render:function(){
return <div style={this.state}>Hello {this.props.name}</div>;
},
componentWillMount:function(){
alert('will');
},
componentDidMount:function(){
alert('did');
var self = this;
window.setTimeout(function(){
self.setState({
color:'green',
fontSize:'30px'
});
},1000);
}
});
ReactDOM.render(
<Hello/>,
document.getElementById('example')
);
componentWillReceiveProps 若组件在重新渲染时接收到新的props属性,会调用这个函数
shouldComponentUpdate 组件接收到新的属性或状态时调用这个函数,在函数中会根据新的属性或状态来判断渲染时是否改变dom节点。
componentWillUpdate 在组件接收到新的props或者state但还没有render时被调用
render 执行render函数,渲染页面
componentDidUpdate 整个updating过程结束后执行这个函数。
Unmounting 组件从 DOM 中移除的时候立刻调用此函数。