222022.11

有什么是vue能做到而react做不到的?

我在知乎讲react是全量更新脏检查,很多人听不懂,说我在乱说,我也懒得理会。我有一个例子,这个例子里面,我们可以看到react是全量更新,而vue可以做到定点更新(当然,vue是不是实现了另说)。我们来看下结构:

<a>
<b>
<c>
<d>
<e>

在这个结构里,我希望以直观的形式,去监督某个值变化,来实现<d>的更新,注意,这里<d>是一个node。在react里面,我们的写法可能是这样:

<SomeComponent attr={this.props.tableTips} />

如果想要更新SomeComponent的渲染结果,要么SomeComponent内部做了什么处理,让其自身可以根据某些条件重新渲染,要么必需是当前这个组件重新渲染,让SomeComponent被动重新渲染。但是为了重新渲染<d>而把a, b, c, e都重新渲染一遍,代价太大。有没有什么办法,在不重新渲染当前组件的情况下,重新渲染<d>这个片段?

一种方法是把d再封装一层,作为一个高阶组件,把需要监听的内容传入该封装好的组件,由组件来监听和重新渲染,这样就可以做到局部重新渲染,而不需要整个重新渲染。但是,这种方法也很笨,因为不可能存在一种万能的高阶组件来达到这个目的,所以到处去写这样的组件也不好。另外,高阶组件的使用,割裂了阅读组件结构的顺序,让我们在后期的维护中,不得不跳来跳去看代码。

而vue就可以做到基于模板来优化这一需求。例如:

<some-component attr="tableTips" />

就可以在模板编译时把tableTips作为可动态读取的片段,这样,每次在渲染some-component时,读取到的attr都可能是新的,从而带来重新渲染。

通过这个例子,我们就可以发现,虽然jsx具有非常强的表达力,但它始终基于原生语法,而作为模板语法,当然具有更强的能力。

11:41:01 已有3条回复
  1. 首先React肯定能局部渲染,不然官方文档就是笑话(https://reactjs.org/docs/rendering-elements.html#react-only-updates-whats-necessary)。

    Vue、React的渲染都是要通过vnode diff做更新,Vue也没细粒到标签级别的vnode,只能说Vue的tempalte编译期间做个太多的aot优化,Jsx因为要使用js/ts的全部能力,注定做不了很好的优化。
    #1253 断崖上的风 2022-11-22 13:33 回复
  2. 你说的那个局部渲染叫commit,不是一回事,麻烦看懂再来讨论
    #1256 回复给#1253 否子戈 2022-11-22 22:27 回复
  3. 如果你说的是前面的render过程,你说的对,默认情况下调用setState都会导致组件及其子孙的render方法的调用。

    这就是React跟Vue的不同之处。Vue基于订阅发布模型的数据响应可以在数据变化时准确知道应该通知谁要做更新;React推崇函数式,没有依赖收集过程,调用setState后无法知道依赖的数据是否更新,默认只能进行render,也因为粗暴的渲染机制,所以也才有了shouldComponentUpdate这样的api。

    以上是否就是你想说的?

    至于你说的脏检查,应该说的是渲染组件及其子孙吧,毕竟对应state,React没做任何检查。
    #1259 回复给#1256 断崖上的风 2022-11-26 10:32 回复