生命周期
- 生命周期是一个抽象概念,在生命周期整个过程中分成了很多阶段(针对类组件):
- 装载阶段(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 就模拟出来类组件的生命周期函数
