立即掌握 derived state：何须望眼欲穿？

前言

React 提供了两种管理组件状态的方法：类组件和函数组件。类组件使用类和 this 来管理状态，而函数组件则使用钩子。

derived state from props 是一个钩子，用于在组件收到新的 props 时更新状态。它可以帮助我们避免在组件的 render 方法中使用条件语句，从而使组件更加简洁和易读。

但是，在某些情况下，我们可能不需要使用 derived state from props，因为有更好的方法来实现相同的效果。

何时不需要使用 derived state from props？

一般来说，我们不需要在以下情况下使用 derived state from props：

• 当组件的状态只取决于组件自己的 props 时。
• 当组件的状态可以从其他来源轻松获得时，例如从 Redux store 或父组件的 props 中。
• 当组件的状态可以通过计算获得时，例如通过使用 useMemo 或 useCallback 钩子。

如何在不使用 derived state from props 的情况下实现相同的效果？

如果我们不需要使用 derived state from props，我们可以使用以下方法来实现相同的效果：

• 使用条件语句。 我们可以直接在组件的 render 方法中使用条件语句来更新组件的状态。这种方法简单易懂，但可能会使组件的代码变得冗长和难以阅读。
• 使用 useReducer 钩子。 useReducer 钩子可以帮助我们管理组件的状态，它与 Redux 非常相似。我们可以使用 useReducer 钩子来定义一个状态更新函数，然后在组件的 render 方法中使用它来更新组件的状态。这种方法比使用条件语句更加简洁和易读，但可能需要更多的学习成本。
• 使用 useMemo 或 useCallback 钩子。 useMemo 和 useCallback 钩子可以帮助我们缓存组件的计算结果，从而避免不必要的重复计算。我们可以使用 useMemo 或 useCallback 钩子来计算组件的状态，然后在组件的 render 方法中使用它来更新组件的状态。这种方法比使用条件语句更加简洁和易读，并且可以提高组件的性能。

总结

derived state from props 是一个非常有用的钩子，但我们并不总是需要使用它。在某些情况下，我们可以使用其他方法来实现相同的效果。

选择使用哪种方法来管理组件的状态取决于具体的场景。如果组件的状态只取决于组件自己的 props，那么我们可以直接使用条件语句来更新组件的状态。如果组件的状态可以从其他来源轻松获得，那么我们可以使用 Redux store 或父组件的 props 来更新组件的状态。如果组件的状态可以通过计算获得，那么我们可以使用 useMemo 或 useCallback 钩子来计算组件的状态。

译后记

很长一段时间，生命周期 componentWillReceiveProps 是用来响应 props 更新的唯一方法。但从 React 16.3 开始，componentWillReceiveProps 不再是受支持的生命周期。相反，我们应该使用 getDerivedStateFromProps 或 useEffect 来响应 props 更新。

getDerivedStateFromProps 是一个静态方法，它在组件挂载时和每次 props 更新时都会被调用。它返回一个对象，该对象中的键是组件状态的键，值是组件状态的新值。

useEffect 是一个副作用钩子，它会在组件挂载时和每次 props 更新后立即执行。它接收两个参数：一个函数和一个依赖项数组。函数是在组件挂载时和每次 props 更新后立即执行的代码。依赖项数组是一个包含组件状态和 props 的数组，当数组中的任何值发生变化时，函数就会被重新执行。

在大多数情况下，useEffect 是比 getDerivedStateFromProps 更好的选择。这是因为 useEffect 更灵活，我们可以使用它来执行任何副作用，而不仅仅是更新组件状态。

但是，在某些情况下，getDerivedStateFromProps 可能是更好的选择。例如，当我们需要在组件挂载时和每次 props 更新时执行相同的代码时，getDerivedStateFromProps 就可以派上用场。

在本文中，我讨论了何时不需要使用 getDerivedStateFromProps，以及如何使用其他方法来实现相同的效果。我希望本文能帮助你更好地理解 getDerivedStateFromProps，并做出明智的决策，选择最适合你组件的方法来响应 props 更新。