• 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 : 在这里进行组件移除以后的一些操作。

  • 相关阅读:
    盛最多水的容器
    字符串的排序
    整数拆分
    TCP和UDP编程
    旋转图像
    非递减数列
    不同路径2
    不同路径
    压缩拉伸图片
    Java对List分割及使用Spring多线程调用
  • 原文地址:https://www.cnblogs.com/webbest/p/5862436.html
Copyright © 2020-2023  润新知