我一直在参加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 函数）。