React Hooks 是否比 Class Components 使用更多内存？

Question

我的理解是 Javascript 类将它们的方法存储在 Class 原型中，因此所有 Class 实例在调用这些方法时都在内存中使用相同的函数定义。即每个实例都使用内存中的单个函数定义。

对于 React Hooks，功能组件可以通过 useState() 返回的函数更新状态。例如

import React, { useState } from 'react'

function MyComponent(){
    const [greeting, setGreeting] = useState("Hello")

    return <h1>{greeting}</h1>
}

如果我的应用程序要渲染 100 个 MyComponents，那么所有 100 个组件中的 setGreeting() 函数是否会引用内存中相同的 setGreeting() 函数，或者内存中是否会有 100 个相同函数的副本？

Answer 1

不，对于 100 个组件，将创建 100 个 setGreeting。SetGreeting 是对该函数的引用。所以会有100个参考。

请参考以下沙盒链接：https://codesandbox.io/s/eager-kowalevski-x20nl

解释：

在下面的代码中，我存储了对 setName 函数的引用，只是为了验证它是否是相同的函数。我在窗口级别存储两个变量。如果正在存储第一个变量，我将其存储在第二个变量中，以便稍后进行比较。当我比较这两者时，它们是不同的。没有一次我收到控制台消息说“真”。所以每次都会创建不同的函数。

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const [name, setName] = useState("asutosh");
  if (window.s1) {
    window.s2 = setName;
  } else {
    window.s1 = setName;
  }
  console.log(window.s1 === window.s2);

  return (
    <div className="App">
      <h1>Hello {name}</h1>
    </div>
  );
}