【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,这有助于代码可读性,并且有助于错误排查和调试。

相关推荐
CCF_NOI.1 小时前
谷歌浏览器深入用法全解析:解锁高效网络之旅
大数据·运维·服务器·前端·计算机·谷歌
paopaokaka_luck4 小时前
基于SpringBoot+Uniapp的健身饮食小程序(协同过滤算法、地图组件)
前端·javascript·vue.js·spring boot·后端·小程序·uni-app
患得患失9495 小时前
【前端】【vscode】【.vscode/settings.json】为单个项目配置自动格式化和开发环境
前端·vscode·json
飛_5 小时前
解决VSCode无法加载Json架构问题
java·服务器·前端
YGY Webgis糕手之路7 小时前
OpenLayers 综合案例-轨迹回放
前端·经验分享·笔记·vue·web
90后的晨仔7 小时前
🚨XSS 攻击全解:什么是跨站脚本攻击?前端如何防御?
前端·vue.js
Ares-Wang7 小时前
JavaScript》》JS》 Var、Let、Const 大总结
开发语言·前端·javascript
90后的晨仔7 小时前
Vue 模板语法完全指南:从插值表达式到动态指令,彻底搞懂 Vue 模板语言
前端·vue.js
德育处主任8 小时前
p5.js 正方形square的基础用法
前端·数据可视化·canvas