React Hook 是否比类组件使用更多内存？

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，setGreeting()所有 100 个组件中的setGreeting()函数是否会引用内存中的相同函数，或者内存中是否会有 100 个相同函数的副本？

Answer 1

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

请参考下面的沙箱链接：https://codesandbox.io/s/eager-kowalevski-x20nl

解释：

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

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>
  );
}