你是否在 React 中使用 useEffect 犯了这个错误？
你是否在 React 中使用 useEffect 犯了这个错误？
Photo by 刘易斯·康埃特·努吉 on 不飞溅
React 函数组件有一个最常用的钩子。这个钩子叫做 使用效果 钩。这个钩子用来告诉 React 你的组件在渲染后需要做一些事情。
使用时常犯一个错误 使用效果 .一开始它看起来并不多，但它产生的问题很难调试。
的奥秘 使用效果 依赖关系
这 使用效果 hook 接受依赖项列表。它告诉 React 每当任何依赖项发生变化时，都会执行传递的回调函数。
这就是犯错的地方。 React 提供了一个钩子，叫做 使用参考 钩。当您想要跟踪一个值时，使用 useRef 挂钩。这个钩子的特别之处在于它不会在值更新时触发重新渲染。
和 使用参考 hook React 保证返回的对象将被存储并与组件的当前实例相关联，只要该组件存在。
使用它不是一个好习惯 使用参考 传递给的依赖项列表中的值 使用效果 .由于 使用参考 只要组件存在，对象实例就永远不会改变，在依赖项列表中使用它不会执行 使用效果 打回来。
也使用 参考电流 在依赖项列表中不是一个好主意，因为它会导致难以调试的令人惊讶的行为。
仔细查看创建的错误 使用效果
下面的应用程序使用 参考电流 在依赖项列表中 使用效果 .查看导致错误的令人惊讶的行为。代码在顶部看起来很简单，但在底层，它创建了一个错误只是因为 参考电流 在依赖项列表中。这 使用效果 使用时钩子没有执行和更新状态 参考电流 作为依赖。
轻松避免此错误的简单方法
使用这个拇指规则，你以后就不会遇到这个错误了： 永远不要在你的 useEffect 依赖数组中使用那些在更新时不会触发重新渲染的东西。依赖项应该只包含参与自上而下 React 数据流的值。比如道具，状态，以及你从中计算出来的东西。
阅读这篇文章和更多关于我的 Typeshare 社交博客
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
