Javascript 优化React应用程序-仅就React[React.JS]而言

今天我接受了一次面试，面试官问我如何提高“React应用程序”的性能——仅在React方面

他不想在CSS（连接/缩小）、JS（连接/缩小）、图像（图像精灵或使用SVG）方面得到任何答案

现在，我能得到的提示是：

• 反应备忘录
• 使用回调挂钩

现在，我真的不知道他在说什么？有人能帮我理解这两个如何帮助优化反应吗？另外，是否还有其他方法（具体而言，仅在React方面与如何优化React应用程序的性能相关）

---

任何帮助都将不胜感激

本文可能会帮助您：

从那篇文章中，您将看到React将比较

之前的
和
之后的
虚拟DOM树，并查找差异。每当找到一棵树时，它都会安排重新渲染该树节点下的整棵树。即：父级重新渲染，其所有子级也将重新渲染。除非你告诉React重新使用它以前渲染过的一些东西，而这些东西并没有改变


使用
React.memo（）
和
React.useCallback
优化React应用程序的方法如下所示：

1-未优化的React应用程序：

请参见，当您单击按钮时，
App
re呈现

即使没有任何新内容传递给这两个子组件，它们也会重新渲染。这是React的默认行为


函数应用程序（）{
log（“渲染应用程序…”）；
const[boolean，setBoolean]=React.useState（false）；
常量someFunction=（）=>{
log（“运行someFunction…”）；
}
返回(
setBoolean（（prevState）=>！prevState）}>
重新渲染应用程序
);
}
常量组件1=（道具）=>{
log（“呈现组件1…”）；
返回(
我是第一部分
);
};
常量组件2=（道具）=>{
log（“呈现组件2…”）；
返回(
我是组件2
);
}
render（，document.getElementById（“根”））
使用回调的
文档是否有帮助？React.memo允许“缓存”正在呈现的功能组件。功能组件通常总是重新渲染，即使它们的道具和状态相同。在备忘录中，他们不再这样做了。这里的优化模式是记忆化。