Open shallinta opened 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>
}
可能更贴切些,感谢指正。
I mean that use either for-loop
way or directly element tags in both components.
What I am arguing is that, when producing li
through for-loop
, vue cannot add patch flag to optimize as well as react
所以 我没有使用 v-for
不是么 🤷♂️
这里想表达的是 静态模版
在编译时
相对于jsx
在优化上有更大的操作空间
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.
就React
来说,将框架内部运行机制的不同考虑进去,这两者是有很大不同的。
可以参考这个PR Optimizing Compiler: Component Folding #7323
我对Vue的运行机制不是很了解,不过这个比较示例是 尤雨溪 提出的,他应该比较了解Vue吧。 🤷♂️
I see. This is the case that make sense. thank you.
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:
And. What a vue component similar to the react component should look like the following:
Looking forward to reply! thx :-)