在React 应用程序中将数据从父级传递给子级的最简单方法是将其传递给子级的. 但是，当深度嵌套的子级需要来自树中更高层组件的数据时，就会出现问题。如果我们通过 传递数据，每个孩子都会被要求接受数据并将其传递给它的孩子，导致道具钻，这是 React 世界中一种可怕的做法。propsprops

为了解决道具钻取问题，我们有状态管理解决方案，如Context API和Redux。 但其中哪一种最适合您的应用？今天我们要回答这个古老的问题！

什么是上下文 API？

我们来看看官方文档：

在典型的 React 应用程序中，数据通过 props 自上而下（父级到子级）传递，但是对于应用程序中的许多组件所需的某些类型的 props（例如语言环境首选项、UI 主题），这种用法可能很麻烦。Context 提供了一种在组件之间共享这些值的方法，而无需显式地通过树的每一层传递 prop。

Context API是一个内置的React工具，不会影响最终的 bundle 大小，并且是通过设计集成的。

要使用Context API，您必须：

1. 创建上下文

   const Context = createContext(MockData);
   

2. 为上下文创建一个提供者

   const Parent = () => {
       return (
           <Context.Provider value={initialValue}>
               <Children/>
           </Context.Provider>
       )
   }
   

3. 消费Context 中的数据

   const Child = () => {
       const contextData = useContext(Context);
       // use the data
       // ...
   }
   

那么什么是 Redux？

当然，让我们来看看文档：

Redux 是 JavaScript 应用程序的可预测状态容器。

它可以帮助您编写行为一致、在不同环境（客户端、服务器和本机）中运行且易于测试的应用程序。最重要的是，它提供了出色的开发人员体验，例如与时间旅行调试器相结合的实时代码编辑。

您可以将 Redux 与 React 或任何其他视图库一起使用。它很小（2kB，包括依赖项），但有大量可用的插件生态系统。

Redux是一个开源库，它提供了一个中央存储和修改存储的操作。它可以与任何使用JavaScript或TypeScript 的项目一起使用，但由于我们将其与Context API进行比较，因此我们将坚持使用基于 React 的应用程序。

要使用Redux，您需要：

1. 创建一个减速器

   import { createSlice } from "@reduxjs/toolkit";
   
   export const slice = createSlice({
       name: "slice-name",
       initialState: {
           // ...
       },
       reducers: {
           func01: (state) => {
               // ...
           },
       }
   });
   
   export const { func01 } = slice.actions;
   export default slice.reducer;
   

2. 配置商店

   import { configureStore } from "@reduxjs/toolkit";
   import reducer from "./reducer";
   
   export default configureStore({
       reducer: {
           reducer: reducer
       }
   });
   

3. 使Store可用于数据消费

   import React from 'react';
   import ReactDOM from 'react-dom';
   import { Provider } from 'react-redux';
   import App from './App.jsx'
   import store from './store';
   
   ReactDOM.render(
       <Provider store={store}>
           <App />
       </Provider>,
       document.getElementById("root")
   );
   

4. 使用状态或调度操作

   import { useSelector, useDispatch } from 'react-redux';
   import { func01 } from './redux/reducer';
   
   const Component = () => {
       const reducerState = useSelector((state) => state.reducer);
       const dispatch = useDispatch();
       const doSomething = () = > dispatch(func01)  
       return (
           <>
               {/* ... */}
           </>
       );
   }
   export default Component;
   

这就是全部呸！如您所见，Redux需要做更多的工作来设置它。

比较 Redux 和 Context API

从表中，您必须能够理解针对大型项目的Redux和针对小型项目的Context API的流行观点的来源。

两者都是针对其特定领域的出色工具，Redux只是将数据从父级传递到子级，而Context API在这种情况下真正发挥了作用。当您拥有大量动态数据时，Redux 会支持您！

所以你不再需要那个去的人：

包起来

在本文中，我们介绍了什么是Redux和Context API以及它们的区别。我们了解到，Context API是一种轻量级的解决方案，更适合将数据从父级传递给深度嵌套的子级，而Redux是一种更强大的状态管理解决方案。

快乐发展！

谢谢阅读

想知道在你的动力箱中无限燃料的秘密吗？查看我在Medium 上的文章

需要顶级前端开发自由职业者？联系我Upwork

想看看我在做什么吗？查看我的GitHub

我是一名自由职业者，将于2022 年中期开始成为数字游民。想要赶上旅程吗？在Instagram 上关注我

关注我的博客，了解关于Dev 的每周新花絮

常问问题

这些是我收到的一些常见问题。所以，我希望这个常见问题部分能解决您的问题。

1. 我是初学者，我应该如何学习 Front-End Web Dev？
   查看以下文章：
   1. 前端开发路线图
   2. 前端项目思路
2. 你会指导我吗？

   抱歉，我的工作量已经很大，没有时间指导任何人。

3. 您想在我们的网站上合作吗？

   正如在上一个问题中提到的，我正处于时间紧迫的状态，所以我不得不放弃这样的机会。

连接到我

• 领英
• 文件夹
• 加班
• GitHub
• Instagram