大家好!最近发布的create-react-app v3和反应钩子,我决定写一个教程如何重构类组件功能挂钩组件。

在本教程中,我将分享我是如何做到的。我称之为“捷径”,因为它不需要你改变回来的代码。还原剂和行动可以几乎离开了。

如果你想要一个更基本的入门钩子集成看看我的反应前一教程。

你能找到这个项目的代码在这里。

这个项目使用的再现和反应钩子将允许您查看代码和差异。打开hooks_container1.js文件和container1.js文件在你的文本编辑器查看差异。我尽力比赛反应类和反应钩线对线使其更容易看到差异。然而,它完全没有成功因为有一些钩子反应和反应类之间的主要区别。我试图保持这两个组件的功能不变所以这将是更容易为你挑选不同的语法。

表的内容

1. TLDR版本
2. useReducer和上下文
3. 何时使用本地或全局状态和useState useReducer
4. 上下文是如何工作的
5. 目录结构
6. 上下文对象
7. 还原剂和行动
8. 阅读和更新状态回来的反应与反应钩子
9. 合并旧州钩子的反应
10. 阅读和更新状态和useReducer回来的还原剂
11. 阅读和调度操作状态
12. 上下文与useState
13. 上下文与useReducer

简单的方法- TL;博士

步骤1:你的还原剂,出口initialState和减速器。不出口违约减速机。

步骤2:行为可以作为来自React-Redux离开

步骤3:导入所有的还原剂和initialState根App.js文件。进口操作正常。

步骤4:通过在每个减速器及其initialState分开useReducer ()钩在App.js文件中。

步骤5:导入React.createContext ()函数初始化后App.js在它自己的文件。将所有子组件<上下文。供应商/ >

步骤6:接下来简单剪切和粘贴React-Redux中定义属性mapStateToProps ()和mapDispatchToProps ()功能价值道具的<上下文。供应商/ >

第七步:从改变调度关键字在你的属性mapDispatchToProps ()函数调度操作函数的名称(数组中的元素解构二)useReducer ()钩。因为每个减速器将拥有自己的useReducer钩,你必须匹配适当的行动派遣合适的还原剂。

第八步:做同样的事情的mapStateToProps ()函数。属性的名称更改为匹配useReducer钩。的状态值useReducer ()钩(1日数组中的元素解构)包含整个减速器的初始状态。你将需要访问的每个属性点符号,然后传递到属性的“价值”道具。

步骤9:最后实际使用全局上下文状态子组件,你第一次导入原始上下文对象的子组件。然后通过在导入的上下文对象useContext ()钩。useContext钩子的结果保存在一个变量。现在,您可以访问所有属性中定义的价值道具的<上下文。供应商/ >在根App.js文件。

访问状态值的子组件上下文:context.stateprop1

调度操作的子组件上下文:()= > context.action1 ()

这里是一个反应回来的类容器和一个钩子功能组件与类似的功能反应。

在开始之前,我想澄清一些事情困惑我当我第一次开始使用钩子的反应。

useReducer和上下文

起初我有点困惑useReducer。我认为仅仅通过使用useReducer,我会自动模仿回来的功能和全局状态。事实并非如此。全球背景下,使我们的国家。上下文可以被用于useReducer和useState。

全局状态:从一个组件状态持续到另一个意义。如果你在一个组件改变状态到另一个组件,政府会得救,如果是全球性的。如果状态是你去另一个组件的本地和国家不会得救。

何时使用本地或全局状态和useState useReducer

出于教学的目的,我将向您展示所有的四种可能的组合与useState useReducer局部和全局状态。在真实的应用程序,我将使用useReducer钩对于复杂的全局状态,如从服务器身份验证和存储数据。我会用简单的本地状态useState钩,如开放和关闭一个模态。

上下文是如何工作的

上下文早于钩子和反应是一种通过道具深层嵌套的子组件。没有上下文,道具会传递到每一个中介组件的子组件。

上下文解决了这个通过允许您传递一个道具到父组件。然后它自动将所有子组件。你不需要通过通过中间人组件。这是我们有一个全球的状态。通过使用上下文根组件,我们的国家是可用的所有子组件。由于App.js根组件,和其他组件的子组件,我们App.js中定义的状态是所有组件。

重要的是要记住,包含所有的状态,初始化和更新在App.js文件中。您可以调用一个函数来更改子组件的状态,但最终在App.js文件更新。

目录结构和介绍

而不是关注如何构建这个应用程序一步一步,我将更加关注React-Redux类之间的差异和钩子的反应。

这里有几个缩写我使用和他们的意思

我们= useState意味着使用useState钩时

你的= useReducer意味着使用useReducer钩时

这是目录结构。这是一个非常基本的应用有:

• 1 React-Redux类
• 1反应功能组件,使用useState useReducer, useContext钩子
• 行为和动作类型
• 还原剂使用钩子的反应
• 与React-Redux还原剂使用
• 一个上下文文件
• 根App.js文件

上下文对象

我喜欢上下文在它自己的文件,因为你必须导入它每个子组件使用useContext ()钩。我们不需要做什么设置上下文对象,我们只需要这一个功能。

另外,请注意我们不传递任何国家上下文对象。你可以看到其他教程,传递值createContext ()函数。这是毫无意义的时候我们将会覆盖这些值设置<上下文。供应商/ >并通过的状态价值道具。

还原剂和行动

现在我将展示一个减速器使用钩子反应,另一个用于使用常规反应回来的。

减速机使用钩子反应:

减速机回来的反应:

注意在钩子减速器反应我们出口intialState和减速器。我们不使用出口违约在底部。我们的反应回来的减速器出口违约减速机。

接下来,我们有我们的行动和行动类型:

行动和行动从反应回来的创造者不需要更改。

阅读和更新状态反应回来的vs钩子的反应

初步信息的方式,我们现在可以看一下hooks_container1.js和container1.js看看之间的差异反应钩子和反应回来的在代码中。

让我们开始看看本地状态为每个看看如何实现一个简单的计数器。

React-Redux

反应钩子

首先要注意的是,我们会使用一个类组件的反应回来的功能组件的钩子的反应。因此为什么我们没有“这”字在我们的反应钩子的代码。因为我们不是在一个类,我们可以直接引用的变量和函数名。

在反应回来的我们在构造函数中初始化状态,有一个专用的设置状态()函数。“状态”和“设置状态()保留的名字。

这不是在钩子的反应。在反应钩子我们创建自己的“状态”关键字,设置状态()函数与useState()挂钩。在上面的例子中,你能想到的“价值”相当于“这。国家”在一个类组件。“这和类似的。状态”,我们使用点符号来访问每个属性,所以我们将语法:

value.name_of_property

当我第一次开始学习钩子,我曾经迷惑useState ()相当于钩设置状态()功能反应回来的。这并不是如此。的反应回来的设置状态()功能相当于数组中的第二个元素解构。在上面的示例中是吗setValue ()。这setValue ()函数是如何更新我们国家用钩子。useState ()然后我们初始化的能力只是一个方式读取和更新状态的功能组件。这个以前是只适用于类组件。

合并旧州钩子的反应

反应的另一个重要的事情需要注意挂钩的例子就是我使用价值…之前更新的状态递增和递减函数。这是传播算子,通过在整个夷为平地之前状态设置状态()函数。

我不需要通过在前面的状态反应回来的例子。当我们更新一个国有资产在反应回来的新国家财产自动合并与旧的国有属性。

这不在钩子反应发生。当你更新状态反应钩子,创建一个新的国家。你看到在反应钩子的例子中我们有两个状态属性:local_state_prop1和local_state_prop2。如果我们只有更新状态local_state_prop2而不是通过价值…然后将会创建一个新的国家,只有local_state_prop2。这意味着我们的local_state_prop1只会被删除。

所以当转换状态反应反应回来的钩子,你需要通过以前在整个状态与传播算子更新单个国家财产。

阅读和更新状态和useReducers回来的还原剂

我们现在可以比较阅读和更新状态useReducer和还原剂。

我们在上面的例子中使用相同的减速器。一个减速机成功和失败动作类型变化stateprop1真的,假的,反之亦然。

useReducer钩

反应回来的

在介绍中提到的,即使我们使用useReducer ()在功能组件,我们仍然只更新本地组件状态。我将向您展示如何模仿回来的功能与环境和全球国家在下一节。重要的是记住我们还是只更新本地状态在我们钩子容器即使我们使用操作和还原剂。

另一方面,在我们的反应类组件,我们更新全局状态,因为我们使用的是回家的。

第一个区别useReducer你会发现是我们进口减速器和初始状态并将其传递到useReducer钩,这是我们不做回来的反应。在反应回来的我们只是使用connect ()函数。

阅读和调度操作状态

接下来,派遣行动反应钩子,我们使用一个箭头函数然后派遣我们的行动的主体功能。你可以直接在调度操作onClick ()事件但有调度函数会使你的代码更加可读。

在反应回来的我们设置属性mapDispatchToProps ()函数,那么每个属性是一个箭头函数,派遣行动。

您会注意到,我们通过行动和行为的创造者以完全相同的方式分派函数在两个钩子和反应回来的反应。字面上没有差异,这就是为什么我们不需要改变我们的行为。我包括所有的调度方式行动发表评论。

钩子和反应回来的反应的唯一区别是,“调度”功能名称是保留在回家的反应。在反应钩子我们创建我们自己的“调度”通过useReducer钩子函数名。

调用调度功能反应回来的我们使用的语法this.props然后属性的名称mapDispatchToProps ()函数。在反应钩子我们只是直接调用分派函数名。

我们所做的阅读状态反应回来的this.props然后的属性的名称mapStateToProps ()函数。属性的名称保存为一个特定的属性的值在一个特定的减速器。在反应钩子我们只是名称的值。这是数组中第一个元素的解构useReducer钩的电话。中定义的属性的名称我们intialState减速器。

上下文与useState

现在我要如何设置一个全局状态上下文。重要的是要注意,上下文不属于反应钩子。useContext ()反应钩,但环境本身并不是反应钩子的一部分。上下文是一个简单的方式传下来的道具从一个父组件深层嵌套的子组件。看到“语境是如何工作的”一节一开始本教程的完整解释。

我也不会回来的反应进行比较和上下文,因为上下文没有相反的反应回来的。我将向您展示如何实现与上下文使用全局状态useReducer ()和useState ()钩。

我们将首先开始使用useState ()设置一个全局状态。

我们将开始建立我们的根App.js文件中的全局状态。我们将首先导入上下文对象设置的context.js文件。我们还需要进口钩子功能组件。

我们可以建立一个简单的计数器。我们的useState ()钩是像往常一样设置。在我们的JSX我们包装< HooksContainer1 / >与<上下文。供应商/ >元素。这就是允许我们通过国家从App.js子组件。我们还有3属性提供给我们价值道具。1的状态值和2属性改变状态。请注意,我们不使用useContext ()在App.js钩。的useContext ()钩会在子组件用来读取和更新。

你可以想的价值道具,都mapStateToProps ()和mapDispatchToProps ()功能结合成一个,因为价值支撑着属性,使您可以读取和更新国家可以被称为访问的组件这正是孩子mapStateToProps ()和mapDispatchToProps ()功能。

现在让我们看看如何使用这个子组件的上下文对象。

我们首先要导入上下文对象。这是我们最初的上下文对象的创建createContext ()函数,而不是<上下文。供应商/ >我们只是设置。那么我们只需通过上下文对象useContext ()并将其保存在一个变量中。这个上下文变量现在我们刚刚中定义的所有属性价值道具的<上下文。供应商/ >。

访问的属性价值支撑我们可以使用点符号。例如,访问国家价值在我们的子组件,我们使用语法context.valueGlobalstate_uS。

请注意,valueGlobalState的名称是什么财产我们支持App.js文件中定义的值。valueGlobalState是持有的财产的价值在App.js我们定义为valueGlobal_uS。同样,改变国家我们所说的属性名和函数的名字我们App.js。

我故意把属性和函数名不同所以它更容易看到子组件上下文是如何工作的。

这是它与useState使用上下文。现在我将演示useReducer。

上下文与useReducer

使用上下文与useReducer本质上是如何实现回家的功能。

为了避免混淆,我将设置一个新的减速机和行动。

我们有一个简单的减速器,作为一个计数器。现在我们可以设置useReducer钩在App.js文件,我们将以同样的方式设置,我们在钩子设置useReducer容器。我们导入ContextReducer及其初始状态并将其传递到useReducer App.js钩。因为我们现在使用上下文我们将不会导入上下文减速器的子组件。国家将被改变在我们App.js文件并将作为道具只是代代相传。

我们设置属性价值道具在同样的方式,当我们使用上下文useState ()钩。行动也派出以完全相同的方式就像我们见过的。

现在我们的子组件:

正如您可以看到的,阅读和更新状态useReducer ()钩很相似useState ()的例子。我们甚至可以使用相同的上下文变量的用途useState (),我们不需要初始化另一个。更新状态我们只是叫我们中定义的属性名价值道具的提供者。这在App.js更新状态。因为我们正在更新状态App.js我们不需要导入ContextReducer在组件并将其传递到我们的孩子useReducer ()钩。

阅读有点不同。自valueGlobalState_uR包含了我们整个国家,我们必须指定一个属性的状态,在这种情况下context_prop1。

这是它!在这之后你可以读取和更新任何组件的状态在你的应用程序使用同样的模式,允许你模仿回来的功能本质上。

本教程的100%免费视频版本和更深入的反应钩子内容看我Udemy课程或Youtube播放列表:

https://www.udemy.com/react-hooks-with-react-redux-migration

https://www.youtube.com/watch?v=l8ODM-KoDpA&list=PLMc67XEAt-ywplHhDpoj5vakceZNr8S0B