🥳 欢送有趣味的小伙伴,一起做点有意义的事!本文译者: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 都会查看是否有任何依赖项产生了变动,如果产生了,将从新运行成果。
相干链接
原文链接
翻译打算原文