react生命周期

1.类组件生命周期

以下是 React 类组件的全部生命周期方法，按照调用顺序排列：

constructor(props)

用途：组件的构造函数，在组件实例化时调用，用于初始化状态和绑定方法。
static getDerivedStateFromProps(props, state)

用途：在组件实例化、接收新的属性（props）或调用 setState 方法之前调用，用于根据新的属性值更新状态。
示例：
static getDerivedStateFromProps(props, state) {
  if (props.initialCount !== state.count) {
    return {
      count: props.initialCount
    };
  }
  return null;
}
render()

用途：必需的生命周期方法，用于渲染组件的 JSX 内容。
componentDidMount()

用途：在组件挂载到 DOM 后调用，用于执行初始化操作、数据获取或订阅事件等。
shouldComponentUpdate(nextProps, nextState)

用途：在组件更新前调用，用于决定是否重新渲染组件。
示例：
shouldComponentUpdate(nextProps, nextState) {
  return this.props.value !== nextProps.value;
}
getSnapshotBeforeUpdate(prevProps, prevState)

用途：在组件更新前调用，返回一个快照值（snapshot），可以在 componentDidUpdate 中使用。
示例：
getSnapshotBeforeUpdate(prevProps, prevState) {
  if (prevProps.list.length < this.props.list.length) {
    return this.listRef.scrollHeight;
  }
  return null;
}
componentDidUpdate(prevProps, prevState, snapshot)

用途：在组件更新后调用，可以执行与前一次渲染相关的操作。
componentWillUnmount()

用途：在组件从 DOM 中卸载前调用，用于清理操作、取消订阅或清除计时器等。
componentDidCatch(error, info)

用途：在组件内部发生错误时调用，用于捕获和处理错误。
以上是 React 类组件的全部生命周期方法。需要注意的是，自 React 16.3 版本起，React 推荐使用 React Hooks 来管理组件的状态和副作用，而不是依赖于类组件的生命周期方法。

React Hooks 是 React v16.8 引入的一项重要特性，它允许您在不编写 class 的情况下使用 state 和其他 React 特性。通过使用 Hooks，您可以在函数组件中使用 state、生命周期方法、副作用等特性，从而更方便地管理组件的逻辑。

在使用 React Hooks 之前，状态管理和生命周期方法只能在类组件中使用。而使用函数组件时，您无法直接使用这些特性，这导致了在一些场景下编写额外的代码或使用高阶组件来实现相同的功能。

React Hooks 提供了一些内置的钩子函数，最常用的包括以下几种：

1. useState：用于在函数组件中添加局部状态。
2. useEffect：用于在函数组件中执行副作用操作，例如数据获取、订阅更新等。
3. useContext：用于在函数组件中使用 React 的上下文。
4. useRef：用于在函数组件中创建可变的 ref 对象。
5. useMemo 和 useCallback：用于在函数组件中进行性能优化。

使用 Hooks 的优势在于它们让您能够更清晰地组织组件的逻辑，避免了 class 组件中的一些问题，例如 this 指针的困扰和代码复用的不便。此外，Hooks 也使得组件之间的状态逻辑可以更容易地共享和复用。

总的来说，React Hooks 是 React 中一种更现代、更灵活的组件编写方式，它使得函数组件能够拥有类组件的功能，同时保持了函数式编程的优势。