React在工作中对于 Custom React Hooks 一些思考
Posted 一百个Chocolate
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React在工作中对于 Custom React Hooks 一些思考相关的知识,希望对你有一定的参考价值。
当我刚接手 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
以上是关于React在工作中对于 Custom React Hooks 一些思考的主要内容,如果未能解决你的问题,请参考以下文章
React 系列 01❤️ 在工作中对于 Custom React Hooks 一些思考
❤️ 在工作中对于 Custom React Hooks 一些思考
React 系列 02❤️ Custom Hooks 中使用 React Context
React 系列 02❤️ Custom Hooks 中使用 React Context