全文共3799字，预计学习时长11分钟

图源：www.itcodemonkey.com

ReactHooks 是从v16.8 引入的又一开创性的新特性。第一次了解这项特性的时候，小芯深深的为 React 团队天马行空的创造力和精益求精的钻研精神所折服，有一种豁然开朗，发现新大陆的感觉。

今天，我们就来通过使用React Hooks实现容器组件。

在开始使用React Hooks实现容器组件之前，先来简单了解一下到底什么是React Hooks和容器组件。

图源：知乎专栏

什么是React Hooks?

React Hooks是React功能组件中能够管理状态和组件生命周期的组件。它能够有效地使组件都具有功能性，甚至可以说大大减少了对基于类的组件的需求。

容器组件中的容器到底是什么?

“对数据获取，然后将数据呈现在相应的子组件中。这就是容器。”

——Jason Bonta

容器组件通常用于从表示组件(即哑组件)中分离数据获取/逻辑、事件和状态。

容器组件对于在其他用例(当前的项目/代码库或其他项目)中重用表示组件特别有帮助。保持组件的“哑”状态可以更容易地共享并重用它们。例如，如果读者想分享，可以使用这个应用程序中Bit (Github) 的list组件:

列表组件本身并没有逻辑，但它有清楚明确的API，使其易于重用：

示例：在bit.dev集合中共享“哑”组件

要解释它的工作原理，请看另一个例子:

exportdefaultclassContainerComponentextends Component {
state = { firstName:"", lastName:"", address:"", data: [] };
componentDidMount() {
axios.get("/url/blablabla").then(res =>this.setState({ data: res.data }));
}
onChangeEvent = () => {
// Complex logic here...
}
onComputeComplexFormulas= () => {
// Complex logic here...
}
render() {
const { firstName, lastName, address } =this.state;
return (
<div>
<DumbComponentfirstName={firstName} lastName={lastName} address={address} />
</div>
)
}
}

viewrawcontainerComponent.jsx hosted with ❤ by GitHub

constDumbComponent= ({ firstName, lastName, address }) => {
return (
<div>
My complete information:
<h3>{firstName}</h3>
<h3>{lastName}</h3>
<h3>{address}</h3>
</div>
)
}
exportdefault DumbComponent;

viewrawdumbComponent.jsx hosted with ❤ by GitHub

因此，上面的代码片段论证了如何在React组件中实现容器组件。在容器组件上，它包含状态、事件处理程序、复杂逻辑、ajax调用和表示组件。

在表示组件中，可以看到大部分UI的内容和需要在UI中显示的道具。

笔者认为，当用户真正想要将状态与表示组件分离时，通常需要使用容器组件。因此，本文只着重阐述使用React Hooks来管理容器组件中的状态这一点。

现在已经解释了什么是React Hooks和容器组件的定义，接下将侧重于论述如何在容器组件中应用Hooks函数。

图源：Unsplash

在容器组件中使用Hooks

容器通常是使用类组件构建的，因为处理逻辑和数据检索通常需要管理状态——这之前是类组件独有的优势。如今，随着ReactHooks的问世，容器也可以由功能组件来构建。

创建容器组件

现在将创建一个基于功能的组件，而不是创建基于类的组件。

像这样编写容器组件：

functionApp() {
const [firstName, setFirstName] =useState("");
const [middleName, setMiddleName] =useState("");
const [lastName, setLastName] =useState("");
return (
<div className="App">
</div>
);
}

viewrawApp.js hosted with ❤ by GitHub

根据上述代码，所有与状态和逻辑相关的东西都会放在这个组件里。在这段代码中，创建了用于管理个人信息(如姓名、中间名、姓氏)状态的Hooks联系。

创建一个表示组件

如前文所述，表示组件中只包含UI。事件、状态作为道具传递，因此容器组件将负责管理状态、数据、事件和逻辑等。

将下列代码片段为例：

functionPersonalInformation({
firstName,
middleName,
lastName,
setFirstName,
setMiddleName,
setLastName
}) {
return (
<div>
<h1 style={{ textAlign:"center" }}>Please fill up the details</h1>
<div style={{ margin:"0 auto", width:"350px" }}>
<h3>First name:</h3>
<input onChange={e =>setFirstName(e.target.value)} />
<h3>Middle name:</h3>
<input onChange={e =>setMiddleName(e.target.value)} />
<h3>Last name:</h3>
<input onChange={e =>setLastName(e.target.value)} />
</div>
<h1 style={{ textAlign:"center" }}>Results</h1>
<div style={{ margin:"0 auto", width:"350px" }}>
<h3>First name: {firstName} </h3>
<h3>Middle name: {middleName} </h3>
<h3>Last name: {lastName} </h3>
</div>
</div>
);
}

viewrawPersonalInformation.js hosted with ❤ by GitHub

对其进行包装

将代码片段粘贴到容器组件中:

functionApp() {
const [firstName, setFirstName] =useState("");
const [middleName, setMiddleName] =useState("");
const [lastName, setLastName] =useState("");
return (
<div className="App">
<PersonalInformation
firstName={firstName}
middleName={middleName}
lastName={lastName}
setFirstName={setFirstName}
setMiddleName={setMiddleName}
setLastName={setLastName}
/>
</div>
);
}

viewrawAppFinished.js hosted with ❤ by GitHub

至此已经使用React Hooks创建了一个容器组件。

既然已经发布了React Hooks，还应该继续使用容器组件吗?

笔者认为，既然有了React Hooks，还在小型应用程序中使用容器组件有点大材小用。不过，React Hooks对于更大规模的程序，仍然有意义。无论选择什么，都要根据需求来选择合适的函数。这些组件是可选的工具，而不是需要严格遵循的定律。

图源：Unsplash

目前一切都倾向于函数式编程，旨在简化使用面向对象编程时遇到的问题，这样就可以专注于编程想法的产生和实现等重要的事情，这反而是一件好事。

PS：Dan Abramov更新了其关于容器组件的热门文章，以解决新的React Hooks问题：

“我不再建议像这样拆分组件了。如果你能在代码库中很自然地发现它，那么这个模式操作起来就比较得心应手。但我曾多次看到它在不必要的情况下，以近乎教条式的狂热在执行。我认为它有用的主要原因是，它能够将复杂的有状态逻辑与组件的其他方面分离开来。Hooks 也能完成同样的操作，而不是简单地任意划分。”

留言点赞关注

我们一起分享AI学习与发展的干货
欢迎关注全平台AI垂类自媒体 “读芯术”

（添加小编微信：dxsxbb，加入读者圈，一起讨论最新鲜的人工智能科技哦～）

读芯术

发布了719 篇原创文章 · 获赞 2389 · 访问量 33万+

他的留言板关注

如何使用React Hooks实现容器组件？

什么是React Hooks?

容器组件中的容器到底是什么?

在容器组件中使用Hooks

既然已经发布了React Hooks，还应该继续使用容器组件吗?

猜你喜欢