自定义 Hook 和封装组件

前言：

Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。

通过自定义 Hook，可以将组件逻辑提取到可重用的函数中。使得一些公共逻辑可以从项目中解耦出来，不仅项目其他地方中使用，还以提供给社区 💻。

一般以 “use” 命名开头，这个是约束。也是为了让 React 帮我们更好地检查是否符合 Hook 规则。

一般放在项目的 hooks 文件下

✍️关于自定义 Hook 的封装：

a.与项目逻辑解耦，抽离出公共逻辑

b.尽量不越界、不涉及到 UI，只关注逻辑

c.外部使用，做到只考虑 输入 和 输出 , 无关乎内部实现

推荐一个强大的 hooks 库 —ahook

封装组件，它和自定义 Hook，都用到函数组件，但是它更加关注 UI 层渲染。

一般放在项目的 components 文件下

✍️关于封装组件：

a. 更加关注 UI 层的渲染，注重考虑复用性

b.在设计组件时，多方面和多维度考虑，组件可扩展性

c.样式的丰富性，高度可再定制性

hook

React hook

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议，转载请注明出处！

自定义 Hook 和 封装组件