React 高阶组件 (HOC) 简介
由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！
过去一周我学到了很多东西，也接触到了很多我很想分享的概念。首先我想谈谈 React 中的高阶函数（HOC）。
.map要理解 React 中的高阶组件，我们首先需要了解 JavaScript 中的高阶函数。JavaScript 中的高阶函数是指接受其他函数作为参数并返回另一个函数的函数。例如，`$(function)` 、 `$(function)` 等都是高阶函数。.filter我在这篇文章中介绍过其中一些：
.forEach()、.map()、.filter()……它们有什么区别？
Johnson Ogwuru ・ 2018 年 5 月 11 日 ・ 阅读 1 分钟
需要注意的是，我假设你已经具备 React 的相关知识；如果你不了解，下面是 Traverse Media 制作的一篇非常棒的教程。
好了，废话不多说，让我们直接进入正题。
高阶组件（HOC）是指接受一个或多个其他组件作为参数并返回新组件的组件。它类似于高阶函数，这也是其名称的由来。HOC 是 React 中一种用于重用组件逻辑的高级技术。当我们想要将登录组件与其他网站组件隔离时，就可以使用 HOC，接下来我会演示如何使用。HOC 通常用作 React 的高级模式，用于设计一些共享特定行为的组件，使其连接方式不同于传统的 state->props 模式。作为一种高级 React 模式，HOC 使我们能够重用组件逻辑。想想我提到的登录组件的功能。登录组件可以只是一个表单，它接受用户名和密码作为参数，并检查数据库或其他存储介质中是否存在该用户。如果用户存在且输入的密码正确，则 App 组件渲染内容组件；如果用户不存在，则 App 组件渲染登录组件。同样的方法也适用于检查网站上的用户是否仍然具有有效的身份验证。这个例子可以用高阶组件来实现。具体方法请看下面的代码。
假设我们有一个这样的应用程序组件
import React, { Component } from 'react'
//below is the app component that would render to the DOM
export default class App extends Component {
render() {
return (
<div>
<h1> Hello world </h1>
</div>
)
}
}
为了创建一个能够执行我们想要的功能（即根据用户登录会话的状态确定要渲染哪个组件）的高阶组件，我们首先需要创建这两个组件。
请注意，为了尽可能简化说明，所有组件都将在 app.js 文件中创建。此外，我们将使用 create-react-app，请先安装好它。
下面，我们将创建登录组件和内容组件，实际上它们都只是虚拟组件，只是在h1标签中调用它们的名称。
import React, { Component } from 'react'
// Login Component
export default function Login {
return (
<div>
<h1>Hi i'm login</h1>
</div>
)
}
//Content component
export default function Content {
return (
<div>
<h1>Hi i'm Content</h1>
</div>
)
}
//App component
export default class App extends Component {
render() {
return (
<div>
//Add component to render here
</div>
)
}
}
各个组件都搭建完毕后，现在是时候创建我们的 HOC 了。
请注意，您可以选择在另一个文件中创建此内容，但为了使本文简洁明了，我将在一个文件中完成所有操作。
将以下代码复制粘贴到Content组件下方、组件之前App。
const withAuthentication = Component1 => Component2 =>
class extends Component {
constructor(props) {
super(props);
this.state = {
isLoggedin: false,
};
}
render(){
if(this.state.isLoggedin) {
return <Component1 />
} else {
return <Component2 />
}
}
以上内容已经是高阶组件所能达到的最简单的形式了。
命名方式至关重要。
HOCs通常的做法是，组件名称以 `<a>` 开头，后跟其具体功能，在本例中是身份验证。这样，任何查看代码的人无需查看代码即可知道这是一个高阶组件。这一点在将叶节点放在单独的文件中with时尤为重要。HOC
为了解释这段代码，我们使用 JavaScript 中所谓的“柯里化”curring来接收传递给 `a` 的参数。当我们向 ` a`HOC传递两个参数时，就使用了柯里化，这实际上等同于我们声明一个方法并向其传递一个参数，这是标准的 JavaScript 做法。HOCComponent1 => Component2 =>
更进一步，HOC 返回一个匿名类，该类有一个状态对象，其中包含一个isLoggedin属性，您可以在开发应用程序的过程中随意操作该属性，以确定用户何时登录以及何时未登录。
在render()方法中，我们添加了一个条件来检查状态的值isLoggedin，因此无论该值为什么，都会相应地返回一个组件。
现在，你肯定想知道该如何使用它。请仔细阅读。将以下代码复制并粘贴到HOC withAuthentication()我们刚才编写的代码下方。
const DoAuthenticate = withAuthentication(Content, Login);
现在，通过将我们的HOC withAuthenticate值赋给一个函数DoAuthenticate，我们将 HOC 内部返回的函数的值设置为DoAuthenticate它本身，从它的名称可以看出，它是一个组件。
由于我们的 HOC 的组织方式，我们需要确保组件保持在中
Content的位置，因为我们期望在用户登录时返回该组件，并且该组件占据中定义的位置。Component1HOCLoginComponent2HOC
现在，我们无需再费心考虑通过应用程序组件渲染哪个组件DOM，只需渲染组件本身DoAuthenticate，让HOC应用程序组件自动进行选择即可。最终，我们的代码应该如下所示。
import React, { Component } from 'react'
// Login Component
export default function Login {
return (
<div>
<h1>Hi i'm login</h1>
</div>
)
}
//Content component
export default function Content {
return (
<div>
<h1>Hi i'm Content</h1>
</div>
)
}
// Higher order Component
const withAuthentication = Component1 => Component2 =>
class extends Component {
constructor(props) {
super(props);
this.state = {
isLoggedin: false,
};
}
render(){
if(this.state.isLoggedin) {
return <Component1 />
} else {
return <Component2 />
}
}
const DoAuthenticate = withAuthentication(Content, Login);
//App component
export default class App extends Component {
render() {
return (
<div>
<DoAuthenticate />
</div>
)
}
}
了解HOC项目真的很有趣，这周我提交了两份申请，以加深对它的了解。以下是申请链接。
Instaclone是 Instagram 应用的克隆版（不过并非完全克隆……哈哈），还有LambdaTimeX。我会把它们的代码仓库链接放在评论区。
为了进一步了解高阶组件（HOC），我推荐你阅读一下Sitepen的这篇文章。🥂🥂🥂🥂
文章来源：https://dev.to/ogwurujohnson/introduction-to-higher-order-components-hocs-in-react-273f