React组件一 从零开始学React

leeming
197 阅读4分钟

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

组件的生命周期

  • 概念：在组件创建、到加载到页面上运行、以及组件被销毁的过程中，总是伴随着各种各样的事件，这些在组件特定时期，触发的事件，统称为 组件的生命周期；

  • 组件生命周期分为三部分：

    • 组件挂载阶段：组件创建阶段的生命周期函数，有一个显著的特点：创建阶段的生命周期函数，在组件的一辈子中，只执行一次；

    componentWillMount: 组件将要被挂载，此时还没有开始渲染虚拟DOM render：第一次开始渲染真正的虚拟DOM，当render执行完，内存中就有了完整的虚拟DOM了 componentDidMount: 组件完成了挂载，此时，组件已经显示到了页面上，当这个方法执行完，组件就进入都了 运行中 的状态

    • 组件运行阶段：也有一个显著的特点，根据组件的state和props的改变，有选择性的触发0次或多次；

    componentWillReceiveProps: 组件将要接收新属性，此时，只要这个方法被触发，就证明父组件为当前子组件传递了新的属性值； shouldComponentUpdate: 组件是否需要被更新，此时，组件尚未被更新，但是，state 和 props 肯定是最新的 componentWillUpdate: 组件将要被更新，此时，尚未开始更新，内存中的虚拟DOM树还是旧的 render: 此时，又要重新根据最新的 state 和 props 重新渲染一棵内存中的 虚拟DOM树，当 render 调用完毕，内存中的旧DOM树，已经被新DOM树替换了！此时页面还是旧的 componentDidUpdate: 此时，页面又被重新渲染了，state 和 虚拟DOM 和 页面已经完全保持同步

    • 组件销毁阶段：也有一个显著的特点，一辈子只执行一次；

    componentWillUnmount: 组件将要被卸载，此时组件还可以正常使用；

vue中的生命周期图

React Native 中组件的生命周期

React中组件的生命周期 - 详解.png

defaultProps

在组件创建之前，会先初始化默认的props属性，这是全局调用一次，严格地来说，这不是组件的生命周期的一部分。在组件被创建并加载候，首先调用 constructor 构造器中的 this.state = {}，来初始化组件的状态。

通过Counter计数器的小案例 - 了解生命周期函数

  1. 给组件设置默认属性：
  2. 给属性进行类型校验，需要先运行cnpm i prop-types --save
  3. import Types from 'prop-types'
  4. static propTypes = {number:Types .number}

React生命周期的回调函数总结成表格如下： React生命周期表格 组件生命周期的执行顺序：

  • Mounting：

  • constructor()

  • componentWillMount()

    • 组件即将挂在到页面上时执行，此时还没有挂在到页面上 ，虚拟dom也没开始创建
    • 等同于vue中的created钩子函数
    • 无法获取dom
    • 能获取到props
    • 能获取到state
    • 能调用自定义函数

  • render() 开始渲染内存中的虚拟dom，当这个函数执行完，内存中就有了一个虚拟dom 但是页面尚未显示dom元素

    • 在return之前虚拟dom还没有开始创建，页面上拿不到任何元素
    • return执行完毕后，虚拟dom创建好了，但是还没有挂在到页面上。

  • componentDidMount() 虚拟dom挂在完成，页面，虚拟内存中，数据保持一致。

    • 最早只能在此函数中操作dom元素
    • 相当于vue中的mounted钩子函数
    • 此组件执行完，就进入到了运行中的状态，所以此函数是组件创建阶段的最后一个函数
  • Updating：

  • componentWillReceiveProps(nextProps)

    • 组件将要接收，外界传递过来的新的props属性值
    • 当子组件第一次被渲染到页面上的时候，不会触发这个函数
    • 只有当父组件中，通过某些事件，重新修改了传递给子组件的props 数据之后，才会触发
    • 获取的数据不是最新，
    • 最新的数据通过参数来获取

  • shouldComponentUpdate(nextProps, nextState)

    • 此函数中要求必须返回一个boolean 如果返回一个fasle,则不会继续执行后续的生命周期函数，而是直接退回到了运行中状态，此时后续的render函数并没有被执行，因此页面不会被更新，但是组件中的state状态，却被修改了

    • 可以通过不同的条件来指定后续的执行效果

      • 偶数次累加
      • // console.log(this.state.num);
// return nextState.num %2 ===0?true:false;

  • componentWillUpdate(nextProps, nextState)

    • 组件将要更新，此时尚未更新，在进入这个生命周期函数的时候，内存中的虚拟DOM是旧的，页面上的DOM元素也是旧的

    • 此时页面上的 DOM节点，都是旧的，应该慎重操作，因为你可能操作的是旧DOM

      获取dom元素
1.原生方式
2.ref属性

  • render() 在render函数中，不能调用setState()方法

  • componentDidUpdate(prevProps, prevState)

    • 组件完成了更新，此时，state中的数据、虚拟DOM、页面上的DOM，都是最新的，此时，你可以放心大胆的去操作页面了
  • Unmounting：
  • componentWillUnmount()
avatar
文章
阅读
粉丝