React 组件生命周期

React生命周期，就是指组件从被创建出来，到被使用，最后被销毁的这么一个过程。而在这个过程中，React提供了我们会自动执行的不同的钩子函数，我们称之为生命周期函数。

一、类式组件

React的生命周期可以分为三个阶段：挂载、渲染、卸载。

1. Mounting（挂载阶段）------ 创建构造函数并初始化，让我们在页面加载完成前后做一些事情。

constructor（构造函数在类组件中比较常见）
getDerivedStateFromProps
render（render函数）只能访问this.props和this.state，不允许修改状态和DOM输出
componentDidMount（组件挂载）------ 一般在这个钩子中做一些初始化的工作，比如：开启定时器，发送网络请求，订阅消息

2. Updating（更新阶段）——状态更新引起的变化，更新页面UI显示或数据更改。

getDerivedStateFromProps
shouldComponentUpdate
render（render函数）------ 渲染组件的UI
getSnapshotBeforeUpdate
componentDidUpdate（组件更新）------ 可以修改DOM

3. Unmounting（卸载阶段）------ 销毁一个组件，销毁前暴露出一个事件，让我们可以在组件销毁前做一些逻辑的处理。

componentWillUnmount（组件销毁） ------ 一般在这个钩子中做一些收尾的工作，比如：关闭定时器，取消订阅消息

代码示例：

import React from 'react';
import ReactDOM from 'react-dom';class App extends React.Component {// constructor用来初始化组件属性，this.state定义数据，super()为了接收到父类的this指针// 创建构造函数constructor(props) {super(props);this.state = {data: 'Old State'}console.log('初始化数据', constructor);}// 组件将要加载,整个组件还没有加载出来，js逻辑已经可以执行, 异步方法可以放在这里执行componentWillMount() {console.log('componentWillMount');}// 组件加载完成componentDidMount() {console.log('componentDidMount');}// 接收父组件传递过来的参数props时触发componentWillReceiveProps() {console.log('componentWillReceiveProps');}// 判断组件是否需要更新,它需要一个返回值，默认为trueshouldComponentUpdate() {console.log('shouldComponentUpdate');return true; // 需要一个布尔返回值, 比如true或false来判断组件是否要根据值的变化而更新,}// 组件将要更新, 如果shouldComponentUpdate的返回值为true，那这个函数就要为组件更新做准备了// 如果shouldComponentUpdate返回值为false，则组件不会更新，componentWillUpdate,componentDidUpdate都不会执行componentWillUpdate() {console.log('componentWillUpdate');}// 组件更新完成componentDidUpdate() {console.log('componentDidUpdate');}// 处理点击事件handleClick() {console.log('更新数据');this.setState({data: 'New State'})}// 把组件渲染到页面上render() {console.log('render');return (<div><h1>Props:{this.state.data}</h1><button onClick={() => this.handleClick()}>更新数据</button></div>)}
}ReactDOM.render(<div><App /></div>,document.getElementById('app')
)

父子组件初始化
父子组件第一次进行渲染加载时控制台的打印顺序为：

Parent 组件： constructor()
Parent 组件： getDerivedStateFromProps()
Parent 组件： render()
Child 组件： constructor()
Child 组件： getDerivedStateFromProps()
Child 组件： render()
Child 组件： componentDidMount()
Parent 组件： componentDidMount()

父子组件生命周期执行顺序总结：
当子组件自身状态改变时，不会对父组件产生副作用的情况下，父组件不会进行更新，即不会触发父组件的生命周期

当父组件中状态发生变化（包括子组件的挂载以及卸载）时，会触发自身对应的生命周期以及子组件的更新

render 以及 render 之前的生命周期，则父组件先执行
render 以及 render之后的声明周期，则子组件先执行，并且是与父组件交替执行
当子组件进行卸载时，只会执行自身的 componentWillUnmount 生命周期，不会再触发别的生命周期

即将废弃的钩子

componentWillMount
componentWillReceiveProps
componentWillUpdate

现在使用会出现警告，下一个大版本需要加上UNSAFE_前缀才能使用，以后可能会被彻底废弃，不建议使用。

componentWillMount: 被 UNSAFE_componentWillMount 取代。
componentWillReceiveProps: 被 UNSAFE_componentWillReceiveProps 取代。
componentWillUpdate: 被 UNSAFE_componentWillUpdate 取代。

这些带有 UNSAFE_ 前缀的函数是 React 在新版本中标记为不安全的生命周期函数，提醒开发者在新代码中避免使用它们。React 团队计划在未来版本中完全移除这些不安全的生命周期函数。

二、函数式组件

在 React 之前的版本中，函数式组件确实没有类组件那样的生命周期方法。这是因为函数式组件最初被设计为纯粹的“无状态”组件，用于简单的 UI 呈现。在这种情况下，组件不需要进行复杂的生命周期管理，因此没有提供生命周期方法。

在 React 中，函数式组件在 React 16.8 版本引入的 Hooks 之后，可以使用 Hooks 来模拟类组件中的生命周期功能。主要用到的是 useEffect 这个 Hook。以下是函数式组件生命周期相关的一些常见钩子：

useEffect

useEffect 可以在函数式组件中执行副作用操作，类似于类组件中的 componentDidMount、componentDidUpdate、componentWillUnmount 三个生命周期函数的组合。

import React, { useEffect } from 'react';function MyFunctionalComponent() {useEffect(() => {// 在组件挂载后执行，相当于 componentDidMountconsole.log('组件挂载了')// 在组件更新后执行，相当于 componentDidUpdateconsole.log('组件更新了')return () => {console.log('组件即将卸载')// 在组件卸载前执行，相当于 componentWillUnmount};}, [/* dependencies */]); // 可选的依赖数组，当数组中的依赖发生变化时，effect 就会重新执行
}

useLayoutEffect

useLayoutEffect 与 useEffect 类似，但在所有 DOM 变更后同步触发，可以用于获取 DOM 元素的布局信息

import React, { useLayoutEffect } from 'react';function MyFunctionalComponent() {useLayoutEffect(() => {// 在所有 DOM 变更后同步执行}, [/* dependencies */]);
}

useMemo 和 useCallback

useMemo 和 useCallback 可以用于性能优化，避免在每次渲染时都重新计算某个值或创建某个函数。

import React, { useMemo, useCallback } from 'react';function MyFunctionalComponent({ data }) {const memoizedValue = useMemo(() => computeExpensiveValue(data), [data]);const memoizedCallback = useCallback(() => {doSomethingWith(memoizedValue);}, [memoizedValue]);// 其他组件逻辑
}