React组件的生命周期

回顾前面的知识

  1. props只能进行数据传递,不能修改,并且只能通过父组件传给子组件;
  2. state(状态)用来保存交互的状态,每个组件自带state属性。不能在组件之间传递数据。
  3. 组件之间传值可以找到这些组件之间共有的父组件,把state属性设置在父组件上。
  4. react可以通过fetch()方法来完成ajax的异步提交。
  5. 组件生命周期前两种:
    • componentWillMount 组件渲染之前加载,在这个周期里边修改,不会进行再次渲染。
    • componentDidLMount 组件渲染之后加载,在这个周期里边修改,会进行再次渲染。

组件的生命周期

  1. componentWillReceiveProps (组件的props改变执行),有一个参数(newProps) 如果只改变当前组件的state,这个周期就不会执行。
  2. shouldComponentUpdate 只要属性props或state改变,都会执行。 返回值是一个布尔值,当返回值为true时执行后面的周期,返回值为false时不执行后面的周期。有两个参数(newprops, newState)。

在上面两个周期中都可以修改state。

  1. componentWillUpdate 组件即将修改事执行。不能在这个周期里边修改state,否则会陷入死循环。
  2. render 组件渲染
  3. componmentDidUpdate 组件修改后,这个周期里边也不能修改state。
  4. 最后一个生命周期,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 : 在这里进行组件移除以后的一些操作。

posted @ 2016-09-11 19:00 Mr.厉害 阅读(...) 评论(...) 编辑 收藏