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

react

全文共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

回到顶部