2.ReactJS组件的生命周期

1. 创建阶段

getDefaultProps: 处理this.props默认值。 在React.createClass()被调用。

2.实例化阶段

React.render被启动之后
1>getInitialState : 初始化组件的state值,其返回值会赋值给组件的this.state属性。 getinitialstate 一它只被调用一次,在组件被挂载时调用。
2>componentWillMount: 组件要被挂载时这个函数被调用,业务逻辑处理均放在这里,如对state的操作。 render 在组件生命周期里被多次调用,我们一般会把只需要执行一次的代码
3>render: 根据state的值,渲染并返回一个虚拟DOM
4>componentDidMount:一旦你的组件已经运行了 render 函数,并实际将组件渲染到了 DOM 中,componentDidMount 就会被调用。我们可以在这儿做任何需要做的 DOM 操作,已经任何需要依赖于组件已经实际存在于 DOM 之后才能做的事情, 例如渲染一个图表。你可以通过调用 this.getDOMNode 在内部访问到 DOM 节点。

state:组件的属性 主要用来存储组件自身需要的数据,每次数据的更新都是通过修改state属性的值。ReactJS内部监听state属性的变化,一旦诞生变化,就会主动触发组件的render方法进行更新虚拟的DOM。
虚拟DOM:将真实的DOM结构隐射成一个JSON数据结构。

3.更新阶段

用户操作之后,
1>componentWillReceiveProps: 该方法发生在this.props被修改,或者父组件调用 setProps()方法之后。
调用this.setState()方法完成对state的修改。
2>shouldComponentUpdate: 用来拦截新的props或state。根据逻辑来判断是否需要更新。
3>componentWillUpdate: shouldComponentUpdatae返回true时候执行。组件中的render(虚拟DOM结构)方法进行更新。
4>componentDidUpdate:
4.销毁阶段
componentWillUnmount:

你可能感兴趣的:(2.ReactJS组件的生命周期)