React在工作中对于 Custom React Hooks 一些思考

Posted 2021-10-23 一百个Chocolate

当我刚接手 React 项目的时候，就对整体项目代码看了一遍，其中就有一个命名为 customer-hooks，打开一看，全都是命名为 usexxx 的 jsx 文件，后面了解到这是大佬们封装的自定义 hook。

于是，今天就自己来总结一下对于 Custom React Hooks 一些思考。

自定义 Hook

以下来自 React 官网 关于自定义 Hook 的介绍：

与 React 组件不同的是，自定义 Hook 不需要具有特殊的标识。我们可以自由的决定它的参数是什么，以及它应该返回什么（如果需要的话）。换句话说，它就像一个正常的函数。但是它的名字应该始终以 use 开头，这样可以一眼看出其符合 Hook 的规则。

而对于 Hook 的规则：

• 不要在循环，条件或嵌套函数中调用 Hook， 确保总是在你的 React 函数的最顶层以及任何 return 之前调用他们。
• 只在 React 函数中调用 Hook

自定义 Hook 封装了一些逻辑代码，并能够把数据向下传递到渲染树的操作。

启动一个 react 项目

可以通过如下命令快速创建简单 react 应用，详细步骤可以参考官网。

 npx create-react