使用React Hook将类组件迁移到Functional
照片来自Olliss的Unsplash
我们都知道反应钩已准备好迎接黄金时段，我们很多人已经开始使用它了。但是，如果我们有一个现有的项目，我们想要对具有类组件的钩子做出反应呢？
本文将指导您将现有的基于类的组件更改为基于钩子的组件。这篇文章不打算详细介绍钩子。
这就是文档中关于钩子的内容。
Hooks让我们在不编写类的情况下使用状态和其他React功能。
让我们从一个示例应用程序开始。这是一个简单的柜台应用程序。代码如下：
const initialData = {count：0，maxLimit：10};类Counter扩展了React.Component {constructor（props）{super（props）; this.state = {count：this.props.initialCount}; } onIncrement =（）=> {this.setState（{count：this.state.count + 1}）; }; onDecrement =（）=> {this.setState（{count：this.state.count – 1}）; }; render（）{return（
）CounterApp扩展了React.Component {render（）{const {initialData} = this.props;回来（
反例
如您所见，我创建了一个简单的计数器应用程序。创建的类组件是：
- CounterApp：这是主要的应用程序组件
- 计数器：实际的计数器组件
请注意，此代码仅供此帖使用，仅供参考。请忽略您可能看到的任何其他改进领域。 ☺
因此，要将类组件转换为函数/钩子组件，以下是步骤：
首先选择最小的类组件，即从底部到顶部的方法会更好。
- 将类组件所具有的所有代码移动到render方法中并使其工作，例如事件处理函数或任何其他函数或代码。
- 更新代码以使用对象解析为道具和状态。
- 在类语法之前添加一行，如下所示。
const Counter =（）=> {}类Counter扩展React.Component {/ * …code到这里* /}
4.将所有内容从render方法移动到更新的函数组件代码块。
const Counter =（）=> {//…code里面类组件代码的render方法在这里} class Counter扩展React.Component {//…Rest代码render（）{//这将是空白现在}}
5.在功能组件的括号内移动道具的析构代码。从代码块中删除代码。
const Counter =（{maxLimit，count}）=> {/ * …代码的代数* /}
6.更新组件以使用诸如useState之类的钩子或可能需要的任何其他钩子。例如。
const Counter =（{maxLimit，count}）=> {//…Rest代码const（count，setCount）= React.useState（count）//…Rest of code}
如果您拥有更多的一个州财产，请将其更改为单独使用所有这些属性的挂钩。我不解释如何在这里编写钩子的语法。请阅读相同的官方文档。
7.最后，更新return语句代码块以使用新创建的props（destructured）或使用hook的状态。所做的任何其他更改都应相应合并。并完全删除类组件行代码。
好吧，这可能看起来很多。让我们研究一下我们的例子吧。
计数器组件
在render方法中移动onIncrement和onDecrement代码块。将其定义为const并将this.onIncrement和this.onDecrement函数分别更新为onIncrement和onDecrement。
对render方法中的props和state使用对象解构。在我们的示例中，您可以执行以下操作：
const {maxLimit，count} = this.propsconst {count} = this.state
现在，就在类Counter扩展React.Component {line之前，创建一个类似于以下的行：
const Counter =（）=> {}
从render方法中剪切所有内容并将其粘贴到const Counter =（）=> {}的大括号之间
将非结构化道具移动到括号中。第2行被注释掉，第1行现在有道具{maxLimit，initialCount}。
const Counter =（{maxLimit，count}）=> {// const {maxLimit，initialCount} = this.props; const {count} = this.state // ….其余的代码}
接下来，我们需要更改this.state。我们将在这里使用useState钩子。更新第2行的代码，如下所示：
const Counter =（{maxLimit，initialCount}）=> {const（count，setCount）= React.useState（initialCount）; // ….其余的代码}
我们更改的代码是使用钩子的语法。
现在是时候更新我们的函数以使用我们使用钩子定义的setCount。更改我们在onIncrement和onDecrement中的代码this.setState。更新后的代码如下所示：
const Counter =（{maxLimit，initialCount}）=> {// ….其余的代码const onIncrement =（）=> {setCount（count + 1）; }; const onIncrement =（）=> {setCount（count – 1）; }; // ….其余的代码}
现在，相应地更新return语句的代码以使用新计数状态（使用钩子创建）和解构结构道具。 AND，删除类Counter完全扩展React.Component {}代码。
theCounter组件的最终代码应如下所示：
const Counter =（{maxLimit，initialCount}）=> {const（count，setCount）= React.useState（initialCount）; const onIncrement =（）=> {setCount（count + 1）; }; const onDecrement =（）=> {setCount（count – 1）; };回来（
）}
所以，您可能会注意到最终没有使用它，代码看起来也更清晰。
CounterApp组件
主CounterApp组件没有太多内容，因此我们可以毫不费力地将其转换为功能组件。 CounterApp的最终代码如下所示：
const CounterApp =（{initialData：{count，maxLimit}}）=> {return（<>
反例
想知道<>和 是什么？这是一种避免我们之前创建的额外元素层的方法。因此，使用它或使用React.Fragment，如本文开头所示。
完整的计数器应用程序代码如下。
const initialData = {count：0，maxLimit：10}; //添加样式以使其看起来更好，以防你想看到conconsttyStyles = {h1：{maxWidth：“185px”，boxShadow：“5px 5px 4px＃888888” }，container：{display：“flex”，alignItems：“center”}，button：{width：“30px”，borderRadius：“50％”，borderStyle：“none”，fontSize：“22px”，backgroundColor：“khaki “，height：”30px“，paddingBottom：”5px“，光标：”指针“}，countDiv：{minWidth：”80px“，填充：”0 15px“，textAlign：”center“，高度：”30px“，lineHeight ：2，border：“1px solid”，borderRadius：“10px”，margin：“0 5px”}} const Counter =（{maxLimit，initialCount}）=> {// styles … const {container，button，countDiv } = counterStyles; const（count，setCount）= React.useState（initialCount）; const onIncrement =（）=> {setCount（count + 1）; }; const onDecrement =（）=> {setCount（count – 1）; };回来（
）;}; const CounterApp =（{initialData：{count，maxLimit}}）=> {return（<>
Counter App：Hooks
摘要
通过这篇文章，我们学到了一些关于如何将基于类的组件转换为基于函数和钩子的组件的技巧。我希望这可以帮助您迁移现有的代码库。
如有任何问题/疑虑，请随时与我们联系。
快乐学习
最初发布于https://www.elanandkumar.com。
使用React Hook将类组件迁移到Functional最初发布在Hacker Noon on Medium上，人们通过突出显示和回应这个故事来继续对话。