BetaSu / just-react

「React技术揭秘」 一本自顶向下的React源码分析书
https://react.iamkasong.com/
MIT License
6.14k stars 543 forks source link

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

Open shallinta opened 4 years ago

shallinta commented 4 years ago

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 commented 4 years ago

改成

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 commented 4 years ago

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

shallinta commented 4 years ago

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

BetaSu commented 4 years ago

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

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

shallinta commented 4 years ago

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 commented 4 years ago

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

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

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

shallinta commented 4 years ago

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