CLAYYA

乌贼馋辣鱼的博客

首页面经React前端

react生命周期

2024-11-26

react生命周期

‍

什么是react生命周期呢？当我们使用各种框架开发程序时，当这个框架启动、程序刚运行时、各个页面之间的交互、数据渲染到页面上面、程序运行结束，应当会有个闭环的操作，而在这个环的起点和终点之间的各个节点，框架给给定一些特定函数供我们自行调用，方便我们执行一些操作，这便是生命周期。

生命周期函数

​image​

主要分为三个阶段：初始化、更新、卸载

初始化阶段

也称为挂载阶段，这个阶段会执行我们在初次加载组件到组件第一次渲染在界面上面期间的一系列钩子函数。

  1. constructor​这是一个构造器，这里面可以接收一个父组件传来的props然后初始化state值。
constructor(props) {
 super(props)
 this.state = {
  a: 0
 }
 console.log('constructor执行了')
}

  1. ​getDerivedStateFromProps​接受props和state做参

    static getDerivedStateFromProps(props, state) {
 console.log('getDerivedStateFromProps---props, state:', props, state)
 // 如果return null 则依然以原来的规则更新state，否则会锁定更新state
 return null
 // return {a:11}
 }

  2. render​ 常用且重要的钩子函数之一。在这里面我们会写一些html标签及自定义的函数，render执行完后便会将这些语句对应渲染到浏览器上面，用户就可以看到我们写的东西了。

  3. componentDidMount​ 常用的钩子，组件挂载完毕执行，也就在render执行完之后之后，因为render执行了，浏览器的dom树已经有了，所以我们便可以在这里操作dom和ref（react的一个特性，代替dom操作，因为react不提倡直接操作dom嘛）。通常在这个钩子函数里面我们请求一些后端接口数据，来初次渲染我们页面。

更新阶段

具体是在我们在更新了state值的时候或者是接收到父组件props值的时候，就是setState()​这个。

  1. ‍

  2. ​shouldComponentUpdate​ 当更新state值的时候会执行这个函数

  3. ​render​ 和初始化时候执行的那个render一样，只是这里是更新值的，所以dom节点会重新更新一下

  4. ​getSnapshotBeforeUpdate​react17另外新增的一个钩子，这里可获取到即将要更新的props和state

    getSnapshotBeforeUpdate(prevProps, prevState) {
 console.log('getSnapshotBeforeUpdate---prevProps:,prevState:', prevProps, prevState)
 return null
 }

  5. componentDidUpdate​ 组件更新完毕执行的钩子函数。

卸载阶段

当组件卸载时执行的钩子函数，这里只有一个，那就是componentWillUnmount​，一般我们在这个函数里面关闭一些定时器或其他收尾的操作。

react 函数组件中的hook 与 class组件生命周期函数的比较

Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。

在Hook中，我们写的都是函数组件，也就没有了类组件这些生命周期钩子，但是取而代之的是Hook提供的一些钩子，其含义也和类组件里面的生命周期函数类似，但是更好用，写起来更方便。

‍