在 react 中,哪种写法性能更好?

越前君
  • 18

在 react、vue.js 中都是采用 Virtual DOM 的方式以减少频繁地操作 DOM 元素带来的性能问题。

由于对这块理解不深,如下两行代码,哪种更好,性能会有什么区别吗?求教,谢谢!

下面是 jsx 示例:

const ele = props => {
  const { type } = props
  return (
    <div>
      <span>{type ? '正确的' : '错误的'}</span>
    </div>
  )
}
const ele = props => {
  const { type } = props
  return <div>{type ? <span>正确的</span> : <span>错误的</span>}</div>
}
回复
阅读 727
2 个回答
首先性能角度出发,更多也就是Rendering 和Scripting各自所需时间 (Scripting时间少那么就是白屏时间少,js阻塞GUI。你举的例子scripting并无差别,rendering可能后者慢一点[前提如果数据量加大的话])。 再说一点,要记得vdom并不一定比操作实际dom快。看实际开发场景,它只是帮你减低了不必要的dom操作。然后在进行必要性更新。仅此而已别太神话

补充说明哈,并没有去测试你所发的例子(...此刻身边没电脑,还是需要更多从实际出发,你可以拿chrome-performance录制对比一下)

两者在vdom层完全相同(生成的vodm完全一致),在js层的性能也可以认为相同,后面一种写法代码体积会大写

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏