当 React 功能组件重新渲染时，它是否会重新分配指定的值和函数？

Question

如果像这样的代码通过 的useEffect依赖关系重新渲染，

// ...
const Test = () => {
  // ...
  
  const value1 = "test1"
  
  const func1 = () => {
    // do something1
  }
  
  useEffect(() => {
    const value2 = "test2"
  
    const func2 = () => {
      // do something2
    }
  }, [sth])
  
  return (
    // ...
  )
}

value1&&&value2重新分配内存吗func1？func2

我很好奇，与优化有关。

Answer 1

简短的回答是，是的。每次函数运行时，旧值都将被垃圾收集，新的原始值将被分配到内存中，并且将创建对函数和对象的新引用。

但真正的问题是“它是否会显着影响性能？” 。答案是……取决于。在大多数情况下，它不会（请参阅有关它的文档）。但在某些情况下，您需要进行一些更改才能优化性能并useCallback使用useMemo.

还值得一提的是（正如Shivam Jha 的回答中所述），触发器useEffect不一定会导致重新渲染（DOM 绘制），因为此过程首先发生在虚拟 DOM 上，并且仅在必要时才会保留在真实 DOM 中。

我将在这里留下一些有关此讨论的其他参考资料。

丹·阿布拉莫夫 (Dan Abramov) 关于记住一切的推文（另请参阅回复）

Kent C. Dodds 关于渲染性能的文章

Felix Gerschau 关于渲染何时发生的文章

Answer 2

value1 & value2 & func1 & func2 是否重新分配到内存？

简而言之，答案是肯定的。

如果你看看它是什么，那就更清楚了：它Test是一个函数，所以每次调用该函数时，函数范围内的所有变量（大括号）都会被重新声明和重新分配。

让我们深入了解细节：

value1和func1都在函数体中，因此每次调用函数时都会声明和分配它们，它们根本不相关，它们只是具有相同的名称。

value2而是func2在带有声明的依赖项 ( sth) 的 useEffect 挂钩内声明，这意味着这两个变量仅在第一次渲染之后以及每次其他渲染之后（如果变量与sth之前的渲染相比改变了其值）才会重新声明和重新分配。

如果你想优化，value1这样它就不会在每次渲染时改变，你可以useMemo这样使用钩子：

const value1 = React.useMemo(() => {
  return "test1"; //here you might have a more complicate way to determine value1
}, []); //array of dependencies like for `useEffect`, so `value1` will be recalculated only if any of the values provided in here change. by leaving it empty value1 will always be the **same** variable

您也可以使用钩子对函数进行类似的useCallback优化