React中高阶组件的友好引入

高阶组件（hoc）是react中一项有趣的技术，用于重建共享几乎相同逻辑的相似组件。我知道这听起来很抽象很高级。然而，它是一种不特定于react的架构模式，因此您可以使用这种方法做很多事情。

例如，您可以使用它在不调整原始组件的情况下向组件添加负载指示器，或者您可以隐藏组件的属性以使其不那么冗长。有许多应用程序，我试图在本教程中介绍其中的大部分。

还有其他几个教程可以教你关于HOC的知识，但大多数教程都是针对高级React开发人员的。当我开始学习React时，我很难理解高级组件的概念以及如何将ad HOC合并到我的项目中以编写更好的代码。本文将解释从开始到孵化过程中您需要了解的关于HOC的一切。

摘要

本教程分为三个部分。第一部分将介绍高级组件的概念。在这里，我们将讨论在查看高阶函数和HOC之前需要理解的语法。第二部分是本系列中最激动人心的部分，您将看到一个实际的HOC示例。我们将使用HOC来创建表单、授权和许多其他东西。

在本教程的第三部分中，我们将更加关注实现高级组件时的最佳实践和注意事项。我们还将简要介绍React中代码共享的替代模式，例如渲染道具。

在开始之前，最好先看看有状态和无状态组件的教程，以便更好地理解React的组件架构。

ES6语法备忘单我们很快就会开始。但在此之前，我想你应该知道一些事情。我更喜欢尽可能多地使用ES6语法，这与HOC配合得很好。作为初学者，HOC是有意义的，但有些ES6语法没有意义。因此，我建议您先浏览此部分，稍后您可以回来参考。

箭头函数箭头函数是一个正则函数表达式，但其语法较短。它们最适合于非方法函数，这也是我们特别感兴趣的。以下是一些帮助您入门的示例:

不带参数的函数/*不带参数的函数*/function（）{ return“这是一个函数表达式& quot；}//相当于（）= & gt{ return &quot这是一个箭头函数表达式}//或（）= & gt"语法较短的箭头& quot单参数函数/*单参数函数*/function（param）{ return { title:“此函数接受参数并返回对象& quot，params: param}}//是语法-等效于param = & gt{ return { title:此箭头函数接受单个参数& quot，params: param }}带多个参数的函数*/Function（param 1，param 2）{ return { title:“此函数接受多个参数& quot，params: add（...args）//6数组中的扩展语法/*数组中的扩展语法*/constwandthree =

既然理论讲完了，我们来看看代码。下面是一个非常简单的例子，它将输入组件包装在

/*函数名的“with”前缀是一种命名约定。您可以将函数命名为任何名称，只要它有意义*/const with grey BG = wrapped component = & gt；class NewComponent扩展组件{ const BG style = { background color:‘grey‘，}；render（）{ return（& lt；div className = & quot包装& quotstyle={bgStyle}&gt。& lt包装组件{...this . props }/& gt；& lt/div & gt；);}};const small cardwithgreybg = withGreyBg（small card）；const BigCardWithGreyBg = withGreyBg（BigCard）；const huge card with grey BG = with grey BG（huge card）；类CardsDemo扩展组件{ render（）{ & lt；SmallCardWithGreyBg {...this . props }/& gt；& ltBigCardWithGreyBg {...this . props }/& gt；& ltHugeCardWithGreyBg {...this . props/& gt；}}withGreyBg函数将一个组件作为输入并返回一个新组件。我们不是直接组合卡片组件并将样式标签附加到每个单独的组件上，而是创建一个特设来实现这一目标。高级组件包装原始组件并添加

虽然这在目前看来不是特别有用，但好处不小。考虑这种情况。您正在使用React路由器，并且需要保护一些路由-如果用户未经身份验证，则这些路由的所有请求都应该被重定向到/login。我们可以使用HOC来有效地管理受保护的路由，而不是重复的身份验证代码。好奇。想知道怎么做吗？我们将在下一个教程中介绍这一点和更多内容。

注意:ECMAScript中提出了一个名为decorator的函数，这使得使用HOC变得很容易。然而，它仍然是一个实验性的函数，所以我决定在本教程中不使用它。如果您正在使用create-react-app，则需要在使用装饰器之前弹出它。如果你运行的是最新版本的Babel（Babel 7），你需要做的就是安装

//用Babel处理JS。{测试:/\。（js | jsx | mjs）$/，include: paths.appSrc，loader:require . resolve（‘babel-loader‘），options: { //这是webpack的‘Babel-loader‘的一个功能（不是Babel本身）。//它启用缓存结果。/node _ modules/。用于快速重建的缓存/babel-loader//目录。缓存方向:true，预设:【‘stage-0‘】}，抽象。

在本教程中，我们学习了HOC的基本概念。Ad HOC是一种构建可重用组件的流行技术。让我们首先讨论基本的ES6语法，以便您可以更容易地习惯箭头函数并编写现代JavaScript代码。

然后我们学习了高阶函数及其工作原理。最后，我们联系了高层组件，并从头开始创建了这个特设。

接下来，我们将通过实际示例介绍不同的ad HOC技术。在此之前，请保持关注。请在评论区分享你的想法。

这几篇文章你可能也喜欢：

• 暂无相关推荐文章

本文由主机参考刊发，转载请注明：React中高阶组件的友好引入 https://zhujicankao.com/109181.html