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

• Z时代
• 2024-01-10
• 分类：综合

全文共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集合中共享“哑”组件

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

1. exportdefaultclassContainerComponentextends Component {
2. state = { firstName:"", lastName:"", address:"", data: [] };
3. componentDidMount() {
4. axios.get("/url/blablabla").then(res =>this.setState({ data: res.data }));
5. }
6. onChangeEvent = () => {
7. // Complex logic here...
8. }
9. onComputeComplexFormulas= () => {
10. // Complex logic here...
11. }
12. render() {
13. const { firstName, lastName, address } =this.state;
14. return (
15. <div>
16. <DumbComponentfirstName={firstName} lastName={lastName} address={address} />
17. </div>
18. )
19. }
20. }

viewrawcontainerComponent.jsx hosted with ❤ by GitHub

1. constDumbComponent= ({ firstName, lastName, address }) => {
2. return (
3. <div>
4. My complete information:
5. <h3>{firstName}</h3>
6. <h3>{lastName}</h3>
7. <h3>{address}</h3>
8. </div>
9. )
10. }
11. exportdefault DumbComponent;

viewrawdumbComponent.jsx hosted with ❤ by GitHub

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

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

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

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

图源：Unsplash

在容器组件中使用Hooks

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

创建容器组件

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

像这样编写容器组件：

1. functionApp() {
2. const [firstName, setFirstName] =useState("");
3. const [middleName, setMiddleName] =useState("");
4. const [lastName, setLastName] =useState("");
5. return (
6. <div className="App">
7. </div>
8. );
9. }

viewrawApp.js hosted with ❤ by GitHub

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

创建一个表示组件

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

将下列代码片段为例：

1. functionPersonalInformation({
2. firstName,
3. middleName,
4. lastName,
5. setFirstName,
6. setMiddleName,
7. setLastName
8. }) {
9. return (
10. <div>
11. <h1 style={{ textAlign:"center" }}>Please fill up the details</h1>
12. <div style={{ margin:"0 auto", width:"350px" }}>
13. <h3>First name:</h3>
14. <input onChange={e =>setFirstName(e.target.value)} />
15. <h3>Middle name:</h3>
16. <input onChange={e =>setMiddleName(e.target.value)} />
17. <h3>Last name:</h3>
18. <input onChange={e =>setLastName(e.target.value)} />
19. </div>
20. <h1 style={{ textAlign:"center" }}>Results</h1>
21. <div style={{ margin:"0 auto", width:"350px" }}>
22. <h3>First name: {firstName} </h3>
23. <h3>Middle name: {middleName} </h3>
24. <h3>Last name: {lastName} </h3>
25. </div>
26. </div>
27. );
28. }

viewrawPersonalInformation.js hosted with ❤ by GitHub

对其进行包装

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

1. functionApp() {
2. const [firstName, setFirstName] =useState("");
3. const [middleName, setMiddleName] =useState("");
4. const [lastName, setLastName] =useState("");
5. return (
6. <div className="App">
7. <PersonalInformation
8. firstName={firstName}
9. middleName={middleName}
10. lastName={lastName}
11. setFirstName={setFirstName}
12. setMiddleName={setMiddleName}
13. setLastName={setLastName}
14. />
15. </div>
16. );
17. }

viewrawAppFinished.js hosted with ❤ by GitHub

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

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

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

图源：Unsplash

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

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

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

留言 点赞 关注

我们一起分享AI学习与发展的干货

欢迎关注全平台AI垂类自媒体 “读芯术”

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

以上是 如何​使用React Hooks实现容器组件？ 的全部内容， 来源链接： utcz.com/z/382998.html