React hooks：它们对共享状态管理有用吗，例如还原？

Posted 2023-02-19

【中文标题】React hooks：它们对共享状态管理有用吗，例如还原？

【英文标题】：React hooks: are they useful for shared state management, like e.g. Redux?

【发布时间】：2019-04-11 12:08:30

【问题描述】：

关于 React 钩子的炒作。信息太多我还是不知道：钩子的出现是否意味着像 Redux 这样的库可以被扔进垃圾箱？

到目前为止，我的理解是钩子对有状态的功能组件很有用，那么共享状态呢？

【问题讨论】：

可能也很有趣且相关：comparison of Redux components with useReducer/useContext.

【参考方案1】：

Hooks 和 Context 不能代替 Redux 来管理应用程序状态。

上下文更类似于道具，因为它解决了在大型、高度嵌套的企业级应用程序中从父级到子级传递信息的噩梦。缺点是 Context 有点复杂，设置起来会很痛苦。

Hooks 只允许我们使用现在可以挂钩到应用程序状态的功能组件，而无需将它们转换为基于类的组件。

令人困惑的是，您可以使用像 useReducer 这样的钩子从 Redux 中获取功能，而无需传统的 Redux 设置。

因此，如果您正在开发一个博客应用程序并且想要添加功能来更新您的博客文章，您可以像这样申请 useReducer：

const blogReducer = (state, action) => 
  switch (action.type) 
    case 'add_blogpost':
      return [...state,  title: `Blog Post #$state.length + 1` ];
    default:
      return state;
  
;

这就是你的减速器，你可以像这样应用它：

export const BlogProvider = ( children ) => 
  const [blogPosts, dispatch] = useReducer(blogReducer, []);

你可以临时创建一个辅助函数来调度一个动作对象：

const addBlogPost = () => 
    dispatch( type: 'add_blogpost' );
  ;

您必须将其添加到您的价值道具'add_blogpost'。无论如何，它只是在功能组件上使用 Redux 的各个方面而不使用整个 Redux 系统本身的一种令人困惑的方式，但同样，它不是替代品。

【参考方案2】：

请注意，Redux 只是状态管理。不是反应库。你可以在任何你想要的项目中使用 Redux。

在未来，也许 redux 连接器 (react-redux) 会被 hooks 杀死或不使用，但 Redux 本身是一个很棒的库，因为它在必须处理大量数据并通过以下方式开发的应用程序中带来了顺序大量的开发人员。

可能有更多用例不需要 Redux，但不是，Hooks 和 context 都不会“杀死”Redux。

我在一个企业应用程序中使用 Redux，以前，它是一团糟，没有事实来源。 Redux 在代码库和逻辑中排序。

【参考方案3】：

不，钩子并没有完全消除对 Redux 的需求。 Hooks 主要是作为实现我们今天必须使用类的功能的替代方案：

本地组件状态 上下文 生命周期方法和副作用

除了上述之外，钩子还提供了一种在组件之间共享状态逻辑的更简单方法。

更可能杀死/替换 Redux 的是 context 而不是 hooks，这是一种跨组件共享状态的方式。但是 IMO 上下文不如 Redux 存储强大，因为 Redux 除了共享状态存储（例如中间件和具有时间旅行功能的专用开发工具）之外还提供其他功能。还有一个围绕 Redux 构建的完整的学习和工具生态系统，据我所知，目前尚没有上下文。

如果您将useReducer 钩子与this example 中的上下文结合使用，它与使用Redux 非常相似，并且对于小型应用程序（如TodoMVC），它可能就足够了。对于大型应用程序，我认为只有一个上下文和useReducer 就足够了。你可能需要多个，这就是使用 Redux 和组合存储的地方。您还可以组合多个上下文和 useReducer 钩子，但只使用 Redux 可能更简洁。

【讨论】：

谢谢阳顺，很详细的解答。

【参考方案4】：

不，Hooks 不会取代 Redux，但它们可以帮助您编写更简洁的代码，并且您不需要编写类组件只是为了使用本地状态或生命周期方法。这是一个很好的用例。

在过去，您必须使用 Redux 来确保在组件的每次重新渲染之间保持状态。但是现在你可以只使用 useState() 方法来实现一个持久的本地状态！ 您可以使用 useEffect() 代替 React 生命周期方法，并且可以使用 useReducer 编写快速操作创建器方法并访问全局状态！

Here is a good article about how to use useReducer() method.

【参考方案5】：

是的，但它看起来仍然不是官方功能。它仍在功能提案中。阶段。许多人认为 react context 会将 redux 转储到垃圾中，但事实并非如此。

【讨论】：

谢谢！ “但事实证明它没有”。为什么？因为还没上映？但可能会在发布时这样做？

是的，根据我的经验，这似乎被夸大了。