在 react 中，哪种写法性能更好？

Question

在 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>
}

Answer 1

首先性能角度出发,更多也就是Rendering 和Scripting各自所需时间 (Scripting时间少那么就是白屏时间少,js阻塞GUI。你举的例子scripting并无差别,rendering可能后者慢一点[前提如果数据量加大的话])。 再说一点,要记得vdom并不一定比操作实际dom快。看实际开发场景,它只是帮你减低了不必要的dom操作。然后在进行必要性更新。仅此而已别太神话。

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

Answer 2

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