DR:React上下文API在React的生态系统中并不是什么新鲜事物。然而，React的16.3.0版本给这个API带来了很多改进。这些改进是如此巨大，以至于它们大大减少了对Redux和其他高级状态管理库的需求。在本文中，您将通过一个实践教程了解到，新的React Context API如何取代对小型React应用程序的Redux需求。"在本实用教程中学习如何从Redux迁移到新的React Context API。"在推特上留言Redux快速回顾在深入研究React上下文API之前，我们需要对Redux做一个快速回顾，这样我们就可以比较两者。Redux是一个JavaScript库，有助于状态管理。Redux并不一定要做出反应。来自世界各地的开发人员已经将Redux与流行的JavaScript前端框架（如React和Angular）一起使用。明确地说，在这种情况下，状态管理意味着处理发生在单页应用程序（SPA）上的特定事件时发生的更改。例如，单击按钮或来自服务器的异步消息等事件可以触发对应用程序状态的更改。尤其是在Redux，有几件事你必须记住：整个应用程序的状态存储在一个单独的对象中（称为真相的来源）。要更改状态，您需要调度描述需要发生什么的操作。不能更改对象的属性或更改现有数组。在Redux中，必须始终返回对新对象或新数组的新引用。如果您不熟悉Redux，并且想了解更多，请查看这个关于Redux的实践教程。React Context API简介React Context API提供了一种通过组件树传递数据的方法，而不必手动将属性传递到每个级别。在React中，数据通常作为属性从父组件传递到子组件。使用新的React Context API取决于三个主要步骤：将初始状态传递给React.createContext. 然后，此函数返回一个带有提供者和使用者的对象。使用树顶部的Provider组件并使其接受名为value的属性。这个值可以是任何值！使用组件树中提供者下方的任何位置的使用者组件来获取状态的子集。如您所见，所涉及的概念实际上与Redux没有太大区别。事实上，即使是Redux也在其公共API下使用了React上下文API。然而，直到最近Context API才达到了可以在野外使用的成熟度。使用Redux创建React应用程序如前所述，本文的目标是向您展示新的Context API如何取代Redux应用程序。因此，您将首先使用Redux创建一个简单的React应用程序，然后，您将了解如何删除此状态管理库，以便可以利用React上下文API。您将构建的示例应用程序是一个应用程序，它处理一些流行食品及其来源的列表。这个应用程序还将包括一个搜索功能，允许用户根据一些关键字过滤列表。最后，你将得到一个类似这样的应用程序：项目要求由于本文只使用React和一些NPM库，所以您只需要节点.js在你的开发机器上安装了NPM。如果你没有节点.js还有NPM，看看官方的安装程序来安装两者。安装这些依赖项后，您将需要安装createreact app工具。这个工具帮助开发人员开始使用React。因此，要安装它，请打开一个终端并运行以下命令：npm i-g创建react应用程序搭建React应用程序安装create react app后，您必须移动到要放置项目的目录并执行以下命令：创建react app redux vs context几秒钟后，create react app将完成创建应用程序。因此，在此之后，您可以移动到该工具创建的新目录中并安装Redux：#进入你的项目cd redux与上下文#安装Reduxnpm i—保存redux react redux注意：redux是主库，react redux是一个促进react和redux之间交互的库。简而言之，后者充当React和Redux之间的代理。使用Redux开发React应用程序现在您已经构建了React应用程序并安装了Redux，请在您首选的IDE中打开您的项目。从那里，您将在src目录中创建三个文件：食品.json：此文件将保存食物及其来源的静态数组。减速器.js：此文件将管理应用程序的Redux版本的状态。动作.js：此文件将保存将触发应用程序Redux版本状态更改的函数。首先，你可以打开食品.json归档并添加以下内容：[{"name"："中国大米"，"origin"："中国"，"大陆"："亚洲"},{"name"："Amala"，"origin"："尼日利亚"，"大陆"："非洲"},{"name"："班库"，"origin"："加纳"，"大陆"："非洲"},{"name"："Pão de Queijo"，"origin"："巴西"，"大陆"："南美洲"},{"name"："伊娃阿戈因"，"origin"："尼日利亚"，"大陆"："非洲"}]如您所见，这个文件没有什么特别之处。它只是一系列来自不同国家的不同食物。在定义食品.json文件，您可以集中精力定义Redux存储。总而言之，商店是你保存应用程序状态的唯一真实来源的地方。所以，打开减速器.js文件并添加以下代码：从'./foods'导入食物；常量初始状态={食物：食物，searchTerm:""，};导出默认函数reducer（state=initialState，action）{//在动作类型之间切换交换机(动作类型) {案例"搜索输入"已更改：const{searchTerm}=有效载荷;返回{…州，searchTerm:searchTerm，食物：搜索词？食品.过滤器(（食物）=>(food.name.toLowerCase（）索引(searchTerm.toLowerCase（））>-1）)：食物，};违约：返回状态；}}在上面的代码中，可以看到reducer函数接收两个参数：state和action。当您启动React应用程序时，此函数将在它之前定义initialState，当您分派操作实例时，此函数将获得当前状态（不再是initialState）。然后，根据这些操作的内容，reducer函数将为你的应用程序生成一个新的状态。接下来，您必须定义这些操作是什么。实际上，为了简单起见，你需要定义一个动作，当用户在你的应用程序中输入一个搜索词时，这个动作就会被触发。所以，打开动作.js归档并在其中插入以下代码：函数searchTermChanged（searchTerm）{返回{type:'搜索_INPUT_CHANGED'，有效载荷：{searchTerm}，};}导出默认值{改变了搜索条件，};有了这个actioncreator之后，下一件事你需要做的就是把你的应用组件打包到ReactRedux上可用的Provider组件中。此提供商负责为您的React应用程序提供唯一的真相来源（即商店）。要使用此提供程序，首先，您将使用在减速器.js文件。然后，您将在提供商的帮助下将此应用商店传递给您的应用程序。要完成这些任务，您必须打开索引.js文件并将其内容替换为：从"React"导入React；从"react-dom"导入ReactDOM；从"react redux"导入{Provider}；从'redux'导入{createStore}；从'./reducers'导入还原器；从"./App"导入应用程序；//使用reducers信息创建商店。//这是因为Redux存储是Redux存储的构建块。const store=createStore（还原器）；ReactDOM.render(，文档.getElementById（'root'）);就这样！您刚刚在React应用程序中配置了Redux。现在，您必须实现UI（用户界面），以便您的用户可以使用本节中实现的功能。构建React接口现在您已经准备好了应用程序的核心，您可以专注于构建用户界面。为此，打开你的应用程序js文件并将其内容替换为：从"React"导入React；从"react redux"导入{connect}；从'./actions'导入操作；导入'/应用程序.css';功能应用程序（{food，searchTerm，searchTermChanged}）{返回(