【React】使用 react hooks 需要遵守的原则

1)只能在顶层调用Hooks

这是指你不能在循环、条件语句或嵌套函数中调用Hooks。确保每次组件渲染时,Hooks的调用顺序保持一致。因此,你应该始终在React函数组件的最顶层调用Hooks。

  • React依赖于Hooks的调用顺序。如果这些调用在不同的渲染中顺序不同,React就不知道应该使用哪一个状态或效果。如果你把Hooks调用放在条件语句中,就可能改变调用的顺序,这会导致奇怪的bug。

  • 例如,你不能在组件中这样使用:

    javascript 复制代码
    function MyComponent() {
       if (someCondition) {
           useState();  // 错误!不能在条件语句中调用Hook
       }
    }
  • 正确的使用应当是, 把所有Hooks放在最顶层:

    javascript 复制代码
    function MyComponent() {
       const [state, setState] = useState();
       if (someCondition) {
           // 其他逻辑
       }
    }

2)只能在React函数中调用Hooks

意味着你只能在React的函数组件内部或自定义Hooks(一个以"use"开头的函数)中使用Hooks,不能在普通的JavaScript函数内部使用。

  • React需要辨别组件和普通函数,自定义Hooks允许开发者抽象整个逻辑,并让其在组件和其他Hooks之间复用。如果在普通的JavaScript函数或类方法中调用Hooks,会使得组件逻辑变得难以管理和错误调试。

3)规则性命名

所有的自定义Hooks必须以"use"开头,例如useFetch、useCounter等。这不仅是一个命名约定,而且它能让React自动识别这个函数是不是一个自定义Hook,这有助于代码可读性,并且有助于错误排查和调试。

相关推荐
stoneship5 分钟前
Web项目减少资源加载失败白屏问题
前端
DaMu34 分钟前
Cesium & Three.js 【移动端手游“户外大逃杀”】 还在“画页面的”前端开发小伙伴们,是时候该“在往前走一走”了!我们必须摆脱“画页面的”标签!
前端·gis
非专业程序员34 分钟前
一文读懂Font文件
前端
Asort36 分钟前
JavaScript 从零开始(七):函数编程入门——从定义到可重用代码的完整指南
前端·javascript
Johnny_FEer37 分钟前
什么是 React 中的远程组件?
前端·react.js
我是日安40 分钟前
从零到一打造 Vue3 响应式系统 Day 10 - 为何 Effect 会被指数级触发?
前端·vue.js
知了一笑40 分钟前
「AI」网站模版,效果如何?
前端·后端·产品
艾小码43 分钟前
用了这么久React,你真的搞懂useEffect了吗?
前端·javascript·react.js
知觉44 分钟前
实现@imput支持用户输入最多三位整数,最多一位小数的数值
前端
RoyLin44 分钟前
TypeScript设计模式:状态模式
前端·后端·typescript