javascript - 是否有条件地呈现 React 组件而不是原始标记以节省性能?

标签 javascript reactjs performance ecmascript-6

这在我的脑海中是有道理的,但我一直无法找到任何事实/文章来支持它。

本质上就是在做类似的事情

render() {
  return (
    someBoolean && <div>Some Markup</div>
  )
}

性能低于

render() {
  return (
    someBoolean && <SomeComponent />
  )
}

其中 SomeComponent 具有与前面示例完全相同的标记。

我的理由是因为标记必须在每次重新渲染时创建它会占用更多内存而保存的组件 SomeComponent 将在内存中引用并且不必在每次重新渲染时创建。

react 文档中有什么地方更彻底地解释了这一点吗?
还是这个推理不准确?

最佳答案

JSX 是 React.createElement 的语法糖。在Babel REPL中可以看出, 他们是

return someBoolean && React.createElement(
  "div",
  null,
  "Some Markup"
);

return someBoolean && React.createElement(SomeComponent, null);

分别。

someBoolean 为假时,React.createElement 不会被调用并且 render 变为空操作。

SomeComponent 没有缓存,每次都会重新创建。与原始标记相比,考虑到它是无状态组件,它提供的开销可以忽略不计:

const SomeComponent = () => <div>Some Markup</div>;

这两个选项都非常快,不应该被优化。

关于javascript - 是否有条件地呈现 React 组件而不是原始标记以节省性能?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49374680/

相关文章:

javascript - 每次我从 devtool 页面单击按钮时,如何执行内容脚本函数一次?

javascript - 构造函数不是javascript中的函数错误

javascript - 组件中的空状态(react redux)

performance - 如何在 Haskell 中优化数值库的速度

javascript - 将图像从数据库加载到 Bootstrap 轮播中

javascript - jQuery 单击不适用于动态创建的元素

javascript - React - 从 Ajax post 请求响应的元数据元素中获取 'message'

javascript - 类型错误:Object(...) 不是函数 - Redux - React-Router

r - "*apply"家族真的没有矢量化吗?

c - 用最少的循环优化 c 中的空心菱形图案打印