原文链接：https://bobbyhadz.com/blog/react-hooks-exhaustive-deps[1] 作者：Borislav Hadzhiev[2] 正文从这开始~ 起因 当我们在...effect钩子中缺少依赖时，react-hooks/exhaustive-deps规则会警告我们。...然而，在这种情况下，它会导致一个错误，因为对象和数组在JavaScript中是通过引用进行比较的。...City: {address.city} ); } 依赖数组上方的注释禁用了单行的 react-hooks/exhausting-deps 规则。...参考资料 [1] https://bobbyhadz.com/blog/react-hooks-exhaustive-deps: https://bobbyhadz.com/blog/react-hooks-exhaustive-deps
. // Either include it or remove the dependency array. eslintreact-hooks/exhaustive-deps }, [])...然而，在本例中，它将导致一个错误，因为在JavaScript中，对象和数组是通过引用进行比较的。.../exhaustive-deps }, []); return ( Country: {address.country} ...City: {address.city} ); } 依赖数组上方的注释禁用了单行的react-hooks/exhausting-deps规则。.../exhaustive-deps }, []); return ( Country: {address.country}
为了解决该错误，禁用某一行的eslint规则，或者将变量移动到useEffect钩子内。...missing dependency: 'obj'. // Either include it or remove the dependency array. eslintreact-hooks/exhaustive-deps.../exhaustive-deps }, []); return ( Country: {address.country} ...City: {address.city} ); } 依赖数组上方的注释禁用了单行的react-hooks/exhausting-deps规则。.../exhaustive-deps }, []); return ( Country: {address.country}
TypeScript yarn add typescript --dev 然后进行 TypeScript 配置！...相关规范 eslint-plugin-react-hooks:React hooks 代码规范的校验规则 rules-of-hooks: 用来检查 Hook 的规则(不能 if/循环中使用 Hooks) exhaustive-deps...规则，此规则会在useEffct添加错误依赖时发出警告并给出修复建议 @typescript-eslint/parser:将 TypeScript 代码纳入 ESLint 校验范围 @typescript-eslint...", "react-hooks"], "extends": [ "plugin:react/recommended", "plugin:@typescript-eslint/recommended..." ], "rules": { "react-hooks/rules-of-hooks": "error", "react-hooks/exhaustive-deps": "warn
配置（.eslintrc.js) 采用社区主流的推荐配置，唯一考虑的点 就是需要考虑和prettier的冲突 module.exports = { root: true, parser: '@typescript-eslint...node: true, }, extends: [ 'eslint:recommended', 'plugin:react/recommended', 'plugin:react-hooks...react-in-jsx-scope': 'off', 'jsx-a11y/accessible-emoji': 'off', 'no-unused-vars': 'off', '@typescript-eslint...no-static-element-interactions': 'off', 'jsx-a11y/click-events-have-key-events': 'off', 'react/prop-types': 'off', 'react-hooks.../exhaustive-deps': 'off', // <--- THIS IS THE NEW RULE '@typescript-eslint/explicit-function-return-type
可以声明很多个 const [count, setCount] = useState(0); // 数组解构,在typescript中使用，我们可以用如下的方式声明状态的类型 const.../exhaustive-deps }, [value]) return debounceVal 复制代码 默认情况下，它在第一次渲染之后和每次更新之后都会执行，而且 effect 的清除阶段在每次重新渲染时都会执行.../exhaustive-deps }, [dependencies]) return { // 请求获取的数据 data, // loading状态 loading.../exhaustive-deps }, [value]) return debounceVal } // 组件中使用 interface searchlParams { handleSearch.../exhaustive-deps }, [debounceSearch]) return ( <input
这个插件能够帮助你在尝试运行应用程序之前捕获并修复 Hooks 错误。...它有两条简单的规则： react-hooks/rules-of-hooks react-hooks/exhaustive-deps 第一条规则只是强制你的代码符合我在第一个技巧中说明的 Hooks 规则...第二个规则，exhaustive-deps 用于实施 useEffect 的规则：effect 函数中引用的每个值也应出现在依赖项数组中。...例如，下面这个 userInfo 组件会触发 exhaustive-deps 警告，因为 userId 变量在 useEffect 内部被引用，但未在依赖项数组中传递： function UserInfo...userId).then(user => setUser(user)) }, []) // no userId here return User detail: } 尽管 exhaustive-deps
ESLint 通过对 JavaScript 文件执行自动扫描来查找常见的语法和代码风格错误。...他们能够发现错误。尽管并不是很多，但实际上 ESLint 还是检查出了很多语法错误和简单的类型错误，例如未定义的变量。 设置它们是一次性的，但节省的时间积累起来非常可观。...version": "detect" 20 } 21 }, 22 "rules": { 23 "linebreak-style": ["error", "unix"], 24 "react-hooks.../rules-of-hooks": "error", 25 "react-hooks/exhaustive-deps": "warn" 26 } 27} 还有一个.prettierrc 文件。...我喜欢在它完成时给出一个提示，否则当没有错误时它会没有任何输出。
React 的函数组件中调用 Hook 在自定义 Hook 中调用其他 Hook 利用 eslint 做 hooks 规则检查 使用 eslint-plugin-react-hooks 来检查代码错误...{ "plugins": ["react-hooks"], // ......"rules": { "react-hooks/rules-of-hooks": 'error',// 检查 Hook 的规则 "react-hooks/exhaustive-deps
前言 本文由一个基础的购物车需求展开，一步一步带你深入理解React Hook中的坑和优化 通过本篇文章你可以学到： ✨React Hook + TypeScript编写业务组件的实践 ✨如何利用React.memo...(newCheckedMap) } 复制代码 因此，第二个商品勾选后，没有按照预期的计算出正确的checkedMap { 1: true, 2: true } 复制代码 而是计算出了错误的.../exhaustive-deps }, [dataSource]) return { checkedMap, dispatch, onCheckedChange,...payload: Object.assign({}, map), }) } }) // eslint-disable-next-line react-hooks.../exhaustive-deps }, [dataSource]) return { map, dispatch, onMapValueChange, } } 复制代码
这就确保了它不随渲染而改变，除非它自身的依赖发生了改变； 推荐启用 eslint-plugin-react-hooks 中的 exhaustive-deps 规则，此规则会在添加错误依赖时发出警告并给出修复建议..."react-hooks" ], "rules": { // ......"react-hooks/rules-of-hooks": "error", "react-hooks/exhaustive-deps": "warn" } } 7、一些重点 （1）可以把
此时，如果能有一套配置，能够让我们在写代码时不用考虑该工程的规则，只要在保存时就能够自动按照当前工程配置好的规则修复所有错误，这无疑会大大增加我们的开发体验和效率。...2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出) { rules: { eqeqeq: 'off', curly: 'error'...比如： { plugins: ['react-hooks', 'jsx-control-statements'], rules: { 'arrow-parens': 0, 'react-hooks.../rules-of-hooks': 'error', 'react-hooks/exhaustive-deps': 'warn', 'jsx-control-statements/jsx-use-if-tag...而在 17 版本之后， React 与 Babel 和 TypeScript 编译器合作，将转化任务交给了编译器自动转化。
虽然看起来情况这么多，但是实际上如果接入了react-hooks/exhaustive-deps规则的话，发现其实际上是会建议我们使用3.3这个方法来处理依赖的，这也是最标准的解决方案，其他的方案要不就是存在不必要的函数重定义...useEffect(() => { post(); }, [dep, post]); 在这个例子中，我们希望达到的目标是仅当dep发生改变的时候，触发post函数，从而将数据进行发送，在这里我们完全按照了react-hooks.../exhaustive-deps的规则去定义了函数。...那么如何解决这个问题呢，一个可行的办法是我们可以将函数定义在useRef上，那么这样的话我们就可以一直拿到最新的函数定义了，实际效果与直接定义一个函数调用无异，只不过不会受到react-hooks/exhaustive-deps
extends: [ 'prettier', 'prettier/react' ], plugins: [ 'promise', 'react', 'react-hooks...': 1, //Using string literals in ref attributes is deprecated 'react/jsx-uses-react': 1, //防止反应被错误地标记为未使用...'react/jsx-uses-vars': 1, //防止在JSX中使用的变量被错误地标记为未使用 'react/no-danger': 1, //防止使用危险的JSX属性...generic-spacing': 0, //泛型对象的尖括号中类型前后的空格规范 'flowtype/space-after-type-colon': 0, //类型注解分号后的空格规范 // react-hooks...'react-hooks/rules-of-hooks': 'error', 'react-hooks/exhaustive-deps': 'warn' } }; 现在，再也不能随心所欲往你的代码库提交文件啦
我们可以通过一个专门实施这些规则的npm包来避免这些错误。..."react-hooks" ], "rules": { // ......"react-hooks/rules-of-hooks": "error", "react-hooks/exhaustive-deps": "warn" } } 如果你正在使用Create
什么是react-hooks?...2 react-hooks思想更趋近于函数式编程。.../* 错误用法 ，effect不支持直接 async await 装饰的 */ useEffect(async ()=>{ /* 请求数据 */ const res = await...const asyncEffect = (callback, deps)=>{ useEffect(()=>{ callback() },deps) } 3useLayoutEffect...渲染条件依赖于第二个参数deps。
type DependencyList = ReadonlyArray; function useMemo(factory: () => T, deps: DependencyList...const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]); 把创建函数factory: () => T和依赖项数组deps...eslint的eslint-plugin-react-hooks中的exhaustive-deps规则可以在添加错误依赖时发出警告并给出修复建议。...此外，useCallback(fn, deps)相当于useMemo(() => fn, deps)，由此useCallback可以看作useMemo的语法糖。...eslint的eslint-plugin-react-hooks中的exhaustive-deps规则可以在添加错误依赖时发出警告并给出修复建议。
ESLint#### 作用：静态代码分析，检测潜在的错误、代码异味和不推荐的编程习惯。提供丰富的自定义规则，可以检查代码风格、变量使用、代码复杂度等。...可以与Prettier集成，先格式化再检查，避免格式问题干扰实际的错误检测。...使用ESLint的插件和共享配置插件@typescript-eslint：为TypeScript提供额外的规则和错误修复。eslint-plugin-import：检查导入顺序和导出规范。...:react-hooks/recommended', 'plugin:prettier/recommended', ], // ...}...plugin:react-hooks/recommended', 'plugin:prettier/recommended', ], rules: { 'import/prefer-default-export
react-hooks 入门 写在最前面 最近项目 升级了react 16.8+，接入了 hooks，这里学习一下最基础的几个官方 hooks 下面是官网文档的链接，基础知识掌握不牢靠的朋友可以再看看...useCallback(fn, deps) 相当于 useMemo(() => fn, deps) how to use useCallback const [data, setData] = useState...了解了上面解构 hooks 下面我们来实战一下 ## 这里我们来写一个简单的 useAPI 下面代码使用了 TypeScript example: codesandbox.io/s/fragrant
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
