首页 > 代码库 > React组件的生命周期
React组件的生命周期
回顾前面的知识
- props只能进行数据传递，不能修改，并且只能通过父组件传给子组件；
- state（状态）用来保存交互的状态，每个组件自带state属性。不能在组件之间传递数据。
- 组件之间传值可以找到这些组件之间共有的父组件，把state属性设置在父组件上。
- react可以通过fetch()方法来完成ajax的异步提交。
- 组件生命周期前两种：
- componentWillMount 组件渲染之前加载，在这个周期里边修改，不会进行再次渲染。
- componentDidLMount 组件渲染之后加载，在这个周期里边修改，会进行再次渲染。
组件的生命周期
- componentWillReceiveProps （组件的props改变执行），有一个参数（newProps) 如果只改变当前组件的state，这个周期就不会执行。
- shouldComponentUpdate 只要属性props或state改变，都会执行。 返回值是一个布尔值，当返回值为true时执行后面的周期，返回值为false时不执行后面的周期。有两个参数（newprops, newState)。
在上面两个周期中都可以修改state。
- componentWillUpdate 组件即将修改事执行。不能在这个周期里边修改state，否则会陷入死循环。
- render 组件渲染
- componmentDidUpdate 组件修改后，这个周期里边也不能修改state。
- 最后一个生命周期，componmentWillUnmount 组件销毁后执行。
补充一个比较全面的组件声明周期的短文。
React组件的生命周期
一个组件就是一个状态机，对于特定的状态，他总是返回一致的输出。 组件的生命周期
实例化
● getDefaultProps :
对于组件类来说，这个方法只会执行一次。对于没有被父类组件置顶props属性的新建实例来说，这个方法返回的对象可用于为实例设置默认的props值。
● getInitialState :
对于组件的每个实例来说，这个方法调用次数有且只有一次。在这个方法里面，你可以初始化你的每个实例的state。与getDefaultProps方法不同的是，每次实例创建时该方法都会被调用一次。在这个方法里，你已经可以访问到this.props。
● componmentWillMount :
该方法会在完成首次渲染之前被执行，这也是在render方法调用前可以修改组件state的最后一次机会。
● render :
在这里你会创建一个虚拟DOM，用来表示组件的输出。对于一个组件来说，render是唯一一个必须的犯法，并且有特定的规则。render方法需要满足以下几个条件。 ○ 只能通过this.props和this.state访问数据 ○ 可以返回null、false或者任何的React组件 ○ 只能出现一个顶级组件，不能返回一组元素 ○ 必须纯净，意味着不能改变组件的状态或者修改DOM的输出
● componmentDidMount :
render方法成功执行之后，会渲染出来真实的DOM，你可以在该方法中使用this.getDOMNode()方法访问原生DOM。
存在期
此时，组件已经渲染好，可以与用户进行交互操作了。随着用户的点击、手指滑动等交互操作，改变组件或者整个应用的state，便会有新的state流入组件树，并且我们将会获得操作它的机会。
● componmentWillReceiveProps:
在任何时刻，组件的props都可以通过父辈组件来更改。出现这种情况时，componmentWillReceiveProps方法会被掉用，你也获得了更改props和state的机会。 ● shouldComponentUpdate:
通过调用该方法，可以对组件进行精准优化。如果你确定某个组件或者它的任何子控件不需要渲染新的state或者props，则将该方法的返回值设置为false。React会跳过render。以及位于render前后的钩子方法，componmentWillUpdate和componmentDidUpdate。该方法是非必须的，并且大部分情况下没必要在开发中使用它。
● componmentWillUpdate:
和componmentWillMount方法类似，组件会在接收到新的props或者state进行渲染之前，调用该方法。需要注意的是，不能在该方法中更新state或者props,而应该借助componmentWillReceiveProps方法在运行时更新state。
● componmentDidUpdate:
和componmentDidMount方法一样，我们可以在这里对已经渲染好的DOM进行更改操作。
销毁 & 清理期
● componmentWillUnmount : 在这里进行组件移除以后的一些操作。
React组件的生命周期