React 组件生命周期指的是组件从加载、更新到卸载的整个过程
React将组件生命周期分为三个阶段
加载阶段(Mount):组件第一次在DOM树中被渲染的过程constructor()static getDerivedStateFromProps()render()componentDidMount()
更新过程(Update):组件状态发生变化，重新更新渲染的过程static getDerivedStateFromProps()shouldComponentUpdate()render()getSnapshotBeforeUpdate()componentDidUpdate()
卸载过程(Unmount):组件从DOM树中被移除的过程componentWillUnmount()
组件加载阶段
加载阶段组件被创建，组件实例插入到DOM中，完成组件的第一次渲染，该过程只会发生一次。 该阶段会依次调用下面的方法：
constructor(props)
- 构造函数，在组件创建时调用，用于初始化状态和绑定事件处理函数。
- 在构造函数中调用
super(props)来调用父类的构造函数，并将 props 传递给父类。 - 初始化组件的状态可以通过
this.state = { }实现。
问题1：constructor中一般用来做什么事？
- 使用super(props)获取父组件的props
- this.state的初始化赋值
- 在this上挂载方法：如this.xxx = this.xxx.bind(this)
问题2:super里不传递props会怎么样？
会导致在构造函数结束前this.props的值是undefined
getDerivedStateFromProps(props, state)
- 当组件接收到新的 props 时调用，在渲染之前执行。
- 用于根据新的 props 计算并更新组件的状态。
- 返回一个新的对象作为新的state或者返回null表示state状态不需要更新该生命周期。
getDerivedStateFromprops可以访问this吗
不可以，它是静态方法，不能访问组件实例。
静态方法，不能在这个函数里使用this，props接收到的新参数，state是当前组件的state对象，同时会返回一个对象用来更新当前的state对象，如果不需要更新可返回null.
⚠️ setState和forceUpdate也会触发这个生命周期
render()
- 必需的生命周期方法，用于渲染组件的 UI。
- 应返回一个 React 元素，描述组件的输出。
- 不应该在这个方法中修改组件的状态或执行副作用操作。
componentDidMount()
该函数会在组件挂载后（插入DOM树中）立即调用，通常进行以下操作：
- 在组件的初始渲染之后立即被调用的
- 通常在这个方法中执行一些初始化操作（比如发起网络请求、订阅事件、获取初始数据）
- 这个方法只会在组件的生命周期中被调用一次，因此适合进行一次性的初始化工作
组件更新阶段：组件的state发生变化时触发更新，props发生变化
当组件的props改变，或者组件内部调用了setState/forceUpdate，会触发更新重新渲染，该过程可能会发生多次。该阶段会依次调用下面的方法：
1、shouldComponentUpdate(nextProps, nextState)
- 在组件接收到新的 props 或者 state 时被调用，在渲染之前执行。
- 可以根据新的 props 或者 state 决定是否需要重新渲染组件。
- 默认返回 true，表示组件将会重新渲染，可以通过返回 false 来阻止重新渲染，以提升性能。
该生命周期函数是用来提升速度的，它是在重新渲染组件开始前触发，默认返回true，可以比较this.props和nextProps,this.state和nextState的值是否变化，来确认返回true和false。返回false时，组件就不会更新后续的render、componentDidUpdate也不会被调用。
2、render()
- 必需的生命周期方法，用于渲染组件的 UI。
- 应返回一个 React 元素，描述组件的输出。
- 不应该在这个方法中修改组件的状态或执行副作用操作。
3、getSnapshotBeforeUpdate(prevProps, prevState)
- 在最新的渲染输出被提交到 DOM 之前调用。
- 用于获取更新前的 DOM 快照或执行一些 DOM 操作。
- 返回的值将作为
componentDidUpdate方法的第三个参数传递。
getSnapshotBeforeUpdate一般用来做什么
在render之后，但是dom元素还没有被更新，返回一个snapshot的值，作为componentDidUpdate的第三个参数传入
用于获取组件更新前的一些信息，如组件滚动条位置之类的；在组件更新后可以恢复一些UI视觉上的状态
4、componentDidUpdate(prevProps, prevState, snapshot)
prevProps:更新前的props prevState:更新前的state snapshot():getSnapshotBeforeUpdate()生命周期的返回值
- 在组件更新完成后立即调用。
- 通常用于执行一些副作用操作，比如更新后的 DOM 操作、发送网络请求等。
- 可以访问到更新之前的 props、state，以及通过
getSnapshotBeforeUpdate返回的值。
组件卸载阶段
卸载阶段只有一个生命周期函数，componentWillUnmount()会在组件卸载及销毁之前直接调用。在此方法中执行必要的清理操作：
清除timer，取消网络请求或清除取消在componentDidMount()中创建的订阅等
1. componentWillUnmount()
- 在组件即将被销毁并从 DOM 中移除之前调用。
- 用于执行一些清理工作，比如取消订阅、清除定时器等。
- 在这个方法中不能调用
setState，因为组件即将被销毁。
react生命周期的过程
- 挂载阶段，首先执行constructor构造方法，创建组件
- 创建完成之后，就会执行render方法，该方法会返回需要渲染的内容
- 随后，react会将需要渲染的内容挂载在DOM树上
- 挂载完成之后就会执行componentDidMount生命周期函数
- 如果给组件创建一个props（用于组件通信）、调用setState（更改state中的数据）、调用forceUpdate(强制更新组件)，都会重新调用render函数
- render函数重新执行之后，就会重新进行DOM树的挂载
- 挂载完成之后就会执行componentDidUpdate生命周期函数
- 当移除组件时，就会执行componentWillUnmount生命周期函数
面试题
react废弃了哪些生命周期
- componentWillMount:在异步渲染中允许对组件进行中断停止等操作，可能会导致单个组件实例被多次调用。
- componentWillReceiveProps
- componentWillUpdate
props改变在哪个生命周期中处理
在getDerivedStateFromProps中进行处理
react性能优化在哪个生命周期
react的父级组件的render函数重新渲染会引起子组件的render方法的重新渲染。但是有时候子组件接收父组件的数据没有变动。子组件render的执行会影响性能。可以使用shouldComponentUpdate解决这个问题。
react发起网络请求在哪个生命周期中进行
异步请求在componentDidMount中操作，同步的状态改变，可以放在componentWillMount中，一般用的少
为什么请求数据要在componentDidMount方法中进行？
componentDidMount方法中的代码，是在组件已经完全挂载到网页上才会调用被执行，所以可以保证数据的加载。此外，在这方法中调用setState方法，会触发重渲染。所以，官方设计这个方法就是用来加载外部数据用的，或处理其他的副作用代码。
函数式组件有没有生命周期
没有
错误处理阶段
componentDidCatch(error,info),此生命周期在后代组件抛出错误后被调用，接收两个参数：
- error：抛出的错误
- info:带有componentStack key的对象，其中包含有关组件引发错误的栈信息、
