乐趣区

关于前端:React-Status-271useEffect视觉指南

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

我发动了一个 周刊翻译打算,仓库地址,拜访地址

当初还很缺气味相投的小伙伴,纯属个人兴趣,当然对于晋升英语和前端技能也会有帮忙,要求:英语不要差的离谱、github 纯熟应用、有恒心、虚心、对本人做的事负责。

想参加的小伙伴,能够 wx 私信,也能够给仓库发 issue 留言,我博客也有具体的集体联系方式:daodaolee.cn

当你尝试间接从 React 中的性能组件的主体中获取数据时会产生的状况👇

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

副作用 Side Effects

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

然而在组件渲染期间不应该产生副作用,因而它们不属于性能组件的主体,
所以 React 为他们提供了一个非凡的地位。

要理解更多对于副作用以及它们为什么须要非凡解决的信息,请查看新的 React 文档 – Keeping Components Pure 中的精彩局部。

解决副作用

副作用的非凡地位在 useEffect 钩子外部,而 useEffect 的名称就是由此来的。

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

React Docs – Using the Effect Hook

useEffect在渲染期间不会运行, 它会在渲染之后运行。然而当初依然有同样的问题,因为在默认状况下,useEffect将在每个组件渲染后运行。

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

有条件地运行 Effect(成果)

有一种办法能够让 Effect 不在每次渲染之后执行,而是有条件的执行。useEffect钩子承受依赖列表作为第二个参数,只有列表中的任何依赖项产生更改,React 才会从新运行成果。让咱们试一试:

当你传递一个空数组作为依赖列表时,成果只会在第一次渲染后运行一次。它能够避免在咱们的案例中产生有限循环。然而,你可能会留神到咱们的 fetch 函数依赖于props.id.

对变动作出反应

让咱们从上次停下来的中央持续,看看当咱们扭转组件的 props 时会产生什么。

咱们心愿组件对 prop 更改做出反馈并获取另一个 product,但当初的状况是没有任何反馈,这是因为咱们传入的是一个空的依赖列表。

如果副作用依赖于任何 props 或 state,咱们应该将它们放在依赖列表中。每次渲染后,React 都会查看是否有任何依赖项产生了变动,如果产生了,将从新运行成果。

相干链接

原文链接

翻译打算原文

退出移动版