React生命周期，就是指组件从被创建出来，到被使用，最后被销毁的这么一个过程。而在这个过程中，React提供了我们会自动执行的不同的钩子函数，我们称之为生命周期函数。
React的生命周期可以分为三个阶段：挂载、渲染、卸载。
1. ?Mounting（挂载阶段）------ 创建构造函数并初始化，让我们在页面加载完成前后做一些事情。
2. Updating（更新阶段）——状态更新引起的变化，更新页面UI显示或数据更改。
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 生命周期，不会再触发别的生命周期
?
即将废弃的钩子
现在使用会出现警告，下一个大版本需要加上UNSAFE_前缀才能使用，以后可能会被彻底废弃，不建议使用。
这些带有 UNSAFE_ 前缀的函数是 React 在新版本中标记为不安全的生命周期函数，提醒开发者在新代码中避免使用它们。React 团队计划在未来版本中完全移除这些不安全的生命周期函数。
?
在 React 中，函数式组件在 React 16.8 版本引入的 Hooks 之后，可以使用 Hooks 来模拟类组件中的生命周期功能。主要用到的是 useEffect 这个 Hook。以下是函数式组件生命周期相关的一些常见钩子：
useEffect:
useEffect 可以在函数式组件中执行副作用操作，类似于类组件中的 componentDidMount、componentDidUpdate、componentWillUnmount 三个生命周期函数的组合。import React, { useEffect } from 'react';
function MyFunctionalComponent() {
useEffect(() => {
// 在组件挂载后执行，相当于 componentDidMount
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]);
// 其他组件逻辑
}