如何用React钩和React上下文API替换Redux

>本教程展示了一种现代的方法，可以使用钩子和上下文API对状态管理进行反应，并为许多应用提供了简化的Redux替代方案。 我们将探索如何有效地处理本地和全球状态，最大程度地减少样板代码和不必要的库依赖性。

键优点：

• >降低的样板：避免经常与redux相关的详细代码。
• 提高的可读性：更清洁，更简洁的代码可增强可维护性。
• 简化的状态共享：>毫不费力地跨部件共享状态。
• 增强的可重复使用性：>通过功能组件和钩子促进代码重复使用。

>先决条件：

对React，React钩子的熟悉以及对Redux概念（还原和动作）的基本理解。 这些示例利用语义UI反应进行样式，但这是可选的。 完整的项目代码可在GitHub [链接到GitHub Repo]上找到。>

状态管理策略：

我们将解决两种基本状态类型：

>
• 局部状态：

  >针对单个组件的特定于单个组件，用于简单值（数字，字符串）或更复杂的结构的>管理。 提供了一个简单的useState函数，而useReducer>需要定义函数才能修改较大对象中的特定状态值。> useState setValue() useReducer

• 全局状态：

  >使用上下文API实现的多个组件共享。 这涉及创建上下文对象（）和一个提供商组件来包装消费者组件。 儿童组件使用挂钩访问上下文。createContext useContext

>

示例1：与

useState>的简单计数器 这个示例以增量和减少按钮构建计数器。 使用上下文将计数器值作为全球状态进行管理。

1. ：

   定义和context/counter-context.js。 CounterContext CounterContextProvider

：
2. 使用

   显示计数器值 components/counter-display.js useContext

：
3. 包含要增加/减少的按钮，使用

   更新状态。> components/counter-buttons.js useContext

：
4. >用

   >。

5. 态

   App.js>>示例2：与CounterView

的联系管理

这个更高级的示例演示了用于管理联系人的CRUD（创建，读取，更新，删除）应用程序。国家更为复杂，需要有效的管理。

useReducer

：useReducer>定义

>，

，
1. >

   函数来处理不同的操作（添加，delete）。 context/contact-context.js ContactContext initialState：reducer

   容器组件，将表单和表与
>。

2. views/contact-view.js：ContactContextProvider>使用

   和一个局部状态变量显示接触列表并处理删除。

3. components/contact-table.js：添加新联系人的表格，使用来派遣操作。 自定义useContext挂钩简化了形式的处理。

4. 态

   components/contact-form.js redux vs.钩子和上下文：useContext> useFormInput>这种方法简化了许多项目的状态管理，但由于其强大的开​​发工具和中间件支持，Redux对于大规模应用程序仍然有价值。 选择取决于项目复杂性和团队熟悉。 对于较小的中型项目，React挂钩和上下文API的组合提供了引人入胜的，不太复杂的替代方案。

常见问题（常见问题解答）：

5. > >提供的常见问题解答部分是全面且结构良好的，涵盖了React Hooks和上下文API的关键方面，包括其使用，最佳实践以及与其他州管理解决方案的比较。 本节有效地解决了共同开发人员的问题和疑虑。App.js>

以上是如何用React钩和React上下文API替换Redux的详细内容。更多信息请关注PHP中文网其他相关文章！