老版本React 中的生命周期函数

怼烎@ 2022-12-10 03:44 43阅读 0赞

生命周期函数指在某一个时刻组件会自动调用执行的函数

constructor当组件创建的时刻会被组件自动调用执行, 它也是初始化的位置. 在这里定义 state, 接收 props, 但是它是 ES6 语法中就带的  
render 函数当数据(state 和 props 发生改变)发生变化的时刻组件会自动调用执行, 所以它就是个生命周期函数  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ4NDQ2NTQy_size_16_color_FFFFFF_t_70_pic_center]

## Initialization: ##

在 constructor它也是初始化的位置. 在这里定义 state, 接收 props

--------------------

## Mounting: ##

**组件第一次挂载到页面的流程**

初始化之后, 一个组件要被渲染然后挂载到页面上, 它会经历一个流程: Mounting  
componentWillMount – > render --> componentDidMount

componentWillMount: 在组件即将被挂载到页面的时刻自动执行(还未挂载到页面)  
render: 做页面挂载  
componentDidMount: 在组件被挂载到页面之后自动被执行

> componentWillmount和 componentdidmount 只在挂载的时候被执行, 挂载也就是组件第一次被放到页面上的时候  
> 它俩只有在第一次挂载的时候执行

--------------------

## Updation: ##

**组件更新的流程**

props 发生变化的时候:  
componentWillReceiveProps --> shouldComponentUpdate --> componentWillUpdate --> render --> componentDidUpdate

componentWillReceiveProps:  
如果一个组件没有 props 参数的情况下, 这个生命周期函数不会执行.  
当一个组件从父组件接收了参数,  
如果这个组件第一次存在于父组件中, 不会执行  
如果这个组件之前已经存在于父组件中, 才会执行  
shouldComponentUpdate:   
组件被更新之前, 它会自动被执行.它要求返回一个布尔值. 来决定组件之后是否要被更新, true 要被更新, false 不要更新. 当数据发生改变的时候, SCU 会先被执行一次, 如果函数返回 false, 后面的函数都不会执行了.如果返回 true, 意思是数据改变, 告诉 react 这个组件需要被更新, 就继续往下走生命周期函数  
componentWillUpdate:   
组件被更新之前, 它会自动执行, 但是他在 scu 之后被执行, 如果 SCU 返回 true 它才执行, 如果返回 false, 这个函数就不会被执行  
render:  这时页面知道数据发生变化了, render 函数就重新渲染虚拟 dom  
componentDidUpdate:   
组件更新完成之后, 它会被执行

--------------------

## Unmounting: ##

**把组件从页面上去除的过程**

componentWillUnmount:   
当组件即将被从页面中剔除的时候, 会被执行. 注意是即将

首先, 页面初始化, constructor 里面做 props 和 state 的设置  
组件要被挂载到页面上, 挂载中有三个函数会被自动执行. 首先是 componentWillMount, 接着是 render, 再是 componentDidMount.  
然后当组件发生变化的时候, 数据发生变化页面发生变化, 这些过程中一些函数会被自动调用, 首先调用 SCU, 返回 true 的话继续往下走, 返回 false 就停掉. 返回 true, 首先走 componentWillUpdate, 然后走 render 函数, 再走 componentDidUpdate, 假设一个组件从父组件接收 props 参数, 当父组件重新渲染的时候, 子组件的 componentWillReceiveProps 被执行, 最后当一个组件要从页面上被移除的时候, 该组件的 componentUnmount 会被执行.

--------------------

render 函数或生命周期必须有,因为  
组件继承自 Component 这个组件, 默认内置了除了 render 的所有生命周期函数, 所以对于组件来说, render 函数必须自己来定义.

--------------------

shouldComponentUpdate的作用场景:

// nextProps 指的是接下里 props 会变化成什么样
      // nextState 同理
      shouldComponentUpdate(nextProps, nextState) { 
        // 如果组件接收的 content 的值发生了变化, 需要让这个组件重新渲染,所以这里需要返回 true
        if(nextProps.content !== this.props.content) { 
          return true;
        } else { 
          return false;
        }
      }

1.  bind 绑定放到 constructor 里, 这样只需一次. 避免无谓渲染
2.  SCU, 提高 react 组件的性能, 因为可以避免无谓的组件 render 函数
3.  setState 可以把多次计算合并成一次

--------------------

## react 中发送 ajax 请求怎么做? ##

一般放在 componetDidMount() 里.  
为什么不放在 render 函数里, 渲染前请求呢? 因为这会造成死循环, 因为 render 函数会被反复执行, 比如在 input 框中输入内容, render 函数就重新执行, ajax 请求就重新发送, 那么很显然不合理, 因为 ajax 请求获取一次数据就行.  
那么哪个生命周期函数只执行一次呢? 就是 componentDidMount, 就是只在组件被挂载到页面上的时候被执行一次, 之后就不重新重复执行了.  
那为什么不放在同样只执行一次的 componentWillMount 里呢, 但是当我们写 react Native 或者用 react 做服务器端的同构时, 如果在这里写 ajax 请求, 会产生冲突.

需要用 axios帮助发送 ajax.

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ4NDQ2NTQy_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/ed8084bed19e426d8d35bab577956560.png