React组件生命周期

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

一、类式组件

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

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

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

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

getDerivedStateFromPropsshouldComponentUpdaterender（render函数）------ 渲染组件的UIgetSnapshotBeforeUpdatecomponentDidUpdate（组件更新）------ 可以修改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'); } // 判断组件是否需要更新,它需要一个返回值，默认为true shouldComponentUpdate() { 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 生命周期，不会再触发别的生命周期  

即将废弃的钩子

componentWillMountcomponentWillReceivePropscomponentWillUpdate

现在使用会出现警告，下一个大版本需要加上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(() => { // 在组件挂载后执行，相当于 componentDidMount console.log('组件挂载了') // 在组件更新后执行，相当于 componentDidUpdate console.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]); // 其他组件逻辑 }

三、什么是React副作用

在 React 中，副作用指的是与组件渲染结果无关的任何操作，例如：

发送网络请求修改 DOM 元素访问本地存储订阅或取消订阅事件改变组件状态外的变量等

这些操作会影响组件的行为和状态，但是并不会直接影响渲染结果。在 React 中，应该将副作用分离出来，以便更好地控制组件的行为和状态。

通常，React 使用钩子函数（如 useEffect）来处理副作用。在 useEffect 中，可以执行一些副作用操作，例如发送网络请求或订阅事件，以及在组件卸载时清除这些操作。这可以保持组件的一致性和可维护性。