How should the two different components be compared in page `/preparation/idea.html`?

[shallinta]

The two component demos in page /preparation/idea.html of vue and react are absolutely different. How should they be compared in that case?

What a react component similar to the vue component should look like the following:

// react jsx
<ul>
  <li>0</li>
  <li>{ name }</li>
  <li>2</li>
  <li>3</li>
</ul>

And. What a vue component similar to the react component should look like the following:

<!-- vue template -->
<template>
  <ul>
    <li v-for="(name, i) in data">{{ i !== 1 ? i : name }}</li>
  </ul>
</template>

Looking forward to reply! thx :-)

[BetaSu]

改成

vue:

<template>
    <ul>
        <li>0</li>
        <li>{{ name }}</li>
        <li>2</li>
        <li>3</li>
    </ul>
</template>

react:

function App({name}) {
    const children = [];
    for (let i = 0; i < 4; i++) {
        children.push(<li>{i === 1 ? name : i}</li>)
    }
    return <ul>{children}</ul>
}

可能更贴切些，感谢指正。

[shallinta]

I mean that use either for-loop way or directly element tags in both components.

[shallinta]

What I am arguing is that, when producing li through for-loop, vue cannot add patch flag to optimize as well as react

[BetaSu]

所以 我没有使用 v-for不是么 🤷‍♂️

这里想表达的是 静态模版在编译时相对于jsx在优化上有更大的操作空间

[shallinta]

So you won't use for-map in react component as well. Then the react component should look like this:

// jsx
(name) => (
  <ul>
    <li>0</li>
    <li>{ name }</li>
    <li>2</li>
    <li>4</li>
  </ul>
);

In this case, it has the same optmization space when converting jsx to vdom tree as vue converting template.

[BetaSu]

就React来说，将框架内部运行机制的不同考虑进去，这两者是有很大不同的。

可以参考这个PR Optimizing Compiler: Component Folding #7323

我对Vue的运行机制不是很了解，不过这个比较示例是 尤雨溪 提出的，他应该比较了解Vue吧。 🤷‍♂️

[shallinta]

I see. This is the case that make sense. thank you.