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

相关推荐
gnip10 分钟前
js上下文
前端·javascript
中草药z10 分钟前
【Stream API】高效简化集合处理
java·前端·javascript·stream·parallelstream·并行流
不知名raver(学python版)24 分钟前
npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR!
前端·npm·node.js
醉方休34 分钟前
React中使用DDD(领域驱动设计)
前端·react.js·前端框架
excel40 分钟前
📖 小说网站的预导航实战:link 预加载 + fetch + 前进后退全支持
前端
学习3人组43 分钟前
React 样式隔离核心方法和最佳实践
前端·react.js·前端框架
世伟爱吗喽1 小时前
threejs入门学习日记
前端·javascript·three.js
朝阳5811 小时前
用 Rust + Actix-Web 打造“Hello, WebSocket!”——从握手到回声,只需 50 行代码
前端·websocket·rust
F2E_Zhangmo1 小时前
基于cornerstone3D的dicom影像浏览器 第五章 在Displayer四个角落显示信息
开发语言·前端·javascript
slim~1 小时前
javaweb基础第一天总结(HTML-CSS)
前端·css·html