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

全文共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组件: