【React Status #271】useEffect视觉指南

欢迎有兴趣的小伙伴,一起做点有意义的事!本文译者:Chen

我发起了一个周刊翻译计划仓库地址访问地址

现在还很缺志同道合的小伙伴,纯属个人兴趣,当然对于提升英语和前端技能也会有帮助,要求:英语不要差的离谱、github熟练使用、有恒心、谦虚、对自己做的事负责。

想参与的小伙伴,可以wx私信,也可以给仓库发issue留言,我博客也有具体的个人联系方式:daodaolee.cn

当你尝试直接从 React 中的功能组件的主体中获取数据时会发生的情况

【React Status #271】useEffect视觉指南_第1张图片

为什么会发生这种情况,React 提供了哪些工具来解决这个问题?

副作用 Side Effects

如果你的 React 组件影响了它自身之外的任何东西,那么它就被称为副作用。

【React Status #271】useEffect视觉指南_第2张图片

然而在组件渲染期间不应该发生副作用,因此它们不属于功能组件的主体,
所以React 为他们提供了一个特殊的位置。

要了解更多关于副作用以及它们为什么需要特殊处理的信息,请查看新的 React 文档 - Keeping Components Pure中的精彩部分。

处理副作用

副作用的特殊位置在useEffect钩子内部,而useEffect的名称就是由此来的。

通过使用这个 Hook,告诉 React 你的组件需要在渲染之后做一些事情。React 会记住您传递的函数(我们将其称为“effect(效果)”),并在执行 DOM 更新后调用它。

React Docs - Using the Effect Hook

useEffect在渲染期间不会运行, 它会在渲染之后运行。但是现在仍然有同样的问题,因为在默认情况下,useEffect将在每个组件渲染后运行。

让我们尝试一下我们的初始组件:

【React Status #271】useEffect视觉指南_第3张图片

有条件地运行Effect(效果)

有一种方法可以让Effect不在每次渲染之后执行,而是有条件的执行。useEffect钩子接受依赖列表作为第二个参数,只有列表中的任何依赖项发生更改,React 才会重新运行效果。让我们试一试:

【React Status #271】useEffect视觉指南_第4张图片

当你传递一个空数组作为依赖列表时,效果只会在第一次渲染后运行一次。它可以防止在我们的案例中发生无限循环。但是,你可能会注意到我们的 fetch 函数依赖于props.id.

对变化作出反应

让我们从上次停下来的地方继续,看看当我们改变组件的 props 时会发生什么。

【React Status #271】useEffect视觉指南_第5张图片

我们希望组件对 prop 更改做出反应并获取另一个product,但现在的情况是没有任何反应,这是因为我们传入的是一个空的依赖列表。

如果副作用依赖于任何props或state,我们应该将它们放在依赖列表中。每次渲染后,React 都会检查是否有任何依赖项发生了变化,如果发生了,将重新运行效果。

【React Status #271】useEffect视觉指南_第6张图片

相关链接

原文链接

翻译计划原文

你可能感兴趣的