javascript - React Hooks 是否比 Class Components 使用更多内存?
问题描述
我的理解是 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 个相同函数的副本?
解决方案
不,对于 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>
);
}
推荐阅读
- windows - WSUS 多服务器自动化 - 如何确定每个 KB 名称的 Windows 版本?
- c# - 运行时 MissingMethodException
- kdb - KDB:功能优化
- ios - Swift 中具有不同单元类型的可重用数据源
- javascript - 每次更新猫鼬模式中的日期
- ios - CoreML 模型:将 imageType 模型输入转换为 multiArray
- ansible - ANSIBLE - 任务中未检测到任何动作
- c# - 如果使用 > 1 个客户端,则具有自己的流请求的 Grpc 多个客户端调用服务器 grpc 方法会失败
- javascript - 自定义屏蔽字段的正则表达式
- r - 如何制作邻接表