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 提供了一些内置的钩子函数，最常用的包括以下几种：

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

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

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

********************************

在 React 中，类组件和函数组件的生命周期有所不同。在类组件中，你可以使用生命周期方法来执行各种操作，而在函数组件中，你可以使用 React Hooks 来实现类似的功能。下面是比较类组件和函数组件的生命周期方式：

类组件生命周期：

挂载阶段（Mounting）：
- constructor()：初始化 state 或绑定事件处理方法。
- componentDidMount()：组件被挂载到 DOM 后调用，进行 DOM 操作或数据获取等操作。
更新阶段（Updating）：
- componentDidUpdate(prevProps, prevState)：组件更新后调用，进行 DOM 操作或数据获取等操作。
卸载阶段（Unmounting）：
- componentWillUnmount()：组件被卸载和销毁前调用，进行清理操作，如取消定时器或清除副作用。

函数组件生命周期（使用 Hooks）：

useState()：声明组件状态。
useEffect()：
- 在挂载时：相当于 componentDidMount()，可以进行副作用操作。
- 在更新时：相当于 componentDidUpdate()，根据依赖条件进行执行。
- 在卸载时：相当于 componentWillUnmount()，用于清理副作用。

虽然函数组件的生命周期没有像类组件那样严格的划分，但通过使用 useEffect() 钩子，可以达到类似生命周期方法的效果。 useEffect() 钩子可以接受第二个参数，它是一个数组，包含了需要依赖的变量，只有当这些变量发生变化时，useEffect() 才会执行。这让你能够根据需要控制组件何时进行副作用操作。

总的来说，函数组件的生命周期管理更加简洁和灵活，适合于小型组件或者功能简单的场景，而类组件则更适合于复杂的组件，或者需要大量状态管理和副作用操作的情况。

posted @ 2024-02-23 17:52 炽橙子阅读(25) 评论(0) 编辑收藏举报

刷新页面返回顶部

炽橙子

react生命周期

类组件生命周期：

函数组件生命周期（使用 Hooks）：

公告