我一直在参加React性能培训课程,下面的代码库用作示例:https://github.com/stevekinney/wordman/blob/main/src/components/application.jsx#L10
当我们调用useState()
内部的函数时,即使correctAnswer
的实际值没有改变,每次重新渲染时都会调用它。如果函数很大很复杂,这可能会导致性能问题。
例如:
const [correctAnswer, setCorrectAnswer] = useState(generateRandomColor());
为了避免这种情况,我必须将其 Package 在匿名函数中,或者不在useState
钩子中调用该函数。
例如:
const [correctAnswer, setCorrectAnswer] = useState(() => generateRandomColor());
const [correctAnswer, setCorrectAnswer] = useState(generateRandomColor);
为什么呢?JavaScript的幕后是怎么回事?
2条答案
按热度按时间xqkwcwgp1#
当您显式调用函数
generateRandomColor()
时,将在每次渲染时调用该函数。调用该函数是因为执行了 Package 函数组件,并且您手动执行了该函数(注意括号)。如果将函数传递给
useState
而不调用它(注意没有括号),useEffect
将只在初始化时执行它:传递一个匿名函数是相同的,你传递一个你希望
useEffect
只在init上调用的函数。e0bqpujr2#
JavaScript的幕后是什么?
这与 * 语言 * 没有任何关系,这只是React函数组件和
useState
的工作方式。每次组件需要渲染时,都会调用您的函数,但正如您所说,useState
只使用您在第一次渲染时给予它的初始值-之后,它完全忽略您给它的初始值。但useState(generateRandomColor())
的意思是:generateRandomColor
,获取其返回值useState
由于
useState
将在第一次渲染后忽略传递的值,这意味着对generateRandomColor
的调用在除第一次渲染之外的任何渲染上都是无意义的。这就是
useState
允许传入函数的原因:它只会在第一次渲染时调用函数,所以如果函数没有任何参数,你可以执行useState(generateRandomColor);
将函数传递给useState
,useState
将在第一次调用它,其他时候忽略它(如果函数需要参数,那么你需要一个 Package 函数)。