React 组件的生命周期

生命周期

• 生命周期是一个抽象概念,在生命周期整个过程中分成了很多阶段(针对类组件):

• 装载阶段(Mount),组件第一次在 DOM 树中被渲染的过程
• 更新过程(Update),组件状态发生变化,重新更新渲染的过程
• 卸载过程(Unmount),组件从 DOM 树中被移除的过程

• React 内部为了告诉我们当前处于那些阶段,会对我们组件内部实现的某些函数进行回调,这些回调函数就是生命周期函数

类组件的生命周期

基础、常用的生命周期

• 我们可以在 React 官网查看常用生命周期图

• constructor: 如果不初始化 state 或进行方法绑定,一般不需要为 React 组件实现构造函数,构造函数通常只做两件事情:通过给 this.state 赋值对象类初始化内部的 state; 为事件绑定实例(this)
• componentDidMount() :会在组件挂载后(插入 DOM 树中)立即调用, 在这里通常处理一下操作:

• 依赖于 DOM 的操作可以在这里进行
• 在此处发送网络请求(官方建议)
• 可以在此处添加一些订阅

• componentDidUpdate(prevProps, prevState, snapshot): 会在更新后被立即调用,首次渲染不会执行此方法,当组件更新后,可以在此处对 DOM 进行操作,如果要对更新前后的 props 进行比较,也可以选在在此处进行网络请求

• 第一个参数可以拿到之前的 props
• 第二个参数可以拿到之前的 state
• 第三个参数是getSnapshotBeforeUpdate函数返回的快照

• componentWillUnmount() :会在组件卸载及销毁之前直接调用,可以在此方法中进行必要的清理操作,比如 清除timer, 取消网络请求,清除订阅

完整的生命周期函数

• 包含常用和不常用的生命周期函数

• shouldComponentUpdate(nextProps, nextState):这里返回一个 bool值,如果是 true 就更新,如果是 false就不更新;常用来做性能优化

• static getDerivedStateFromProps(props, state):会在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。它应返回一个对象来更新 state，如果返回 null 则不更新任何内容。

• getSnapshotBeforeUpdate(prevProps, prevState):在 React 更新 DOM 之前回调的一个函数,可以获取 DOM 更新前的一些信息(比如滚动位置)

• 除以上生命周期函数外,react 还提供了一些过期的生命周期函数,这里不建议使用,如果想了解,可以查看官网介绍

函数式组件的生命周期

• 函数式组件没有生命周期函数,但是可以使用 hook技术实现类似生命周期函数的功能
• 在函数式组件中我们主要使用 useEffect来类比类组件的生命周期
• useEffect 接收两个参数:

• 第一个参数是一个函数,这个函数会在第一次渲染的时候调用一次(类似类组件中的 componentDidMount()函数); 这个函数可以返回一个函数, 返回的这个函数会在组件将要卸载的时候调用(类似类组件中的 componentWillUnmount()函数)
• 第二个参数是一个数组:
• 当这个参数不传时,默认监听所有状态的改变,只要有状态的改变,就会触发传入的第一个参数函数的调用,
• 当这个参数传入的是一个空数组时,意味着所有状态的改变都不触发第一个函数的调用
• 当这个参数传入的数组不为空时,会监听数组中的每个状态的改变,任一个状态的改变都会触发第一个参数函数的调用
• 第一个参数和第二个参数合起来用就相当于类组件中的 componentDidUpdate()函数, 这样 useEffect 就模拟出来类组件的生命周期函数