如果从市场和生态的角度上讲,在快2026年的今天,Flutter和React Native几乎没有什么太大区别(比如GitHub stars数量,GitHub中仓库的数量,第三方包的数量)
这里其实是从技术的角度讨论,Flutter和React目前的情况,他们到底有哪些区别
渲染原理
不管是那种技术,只要是渲染UI,基本都摆脱不了下面的三层结构:
react中的渲染机制
在react中,可以对照着图中,有如下对应:
| JSX/tsx | 描述状态和UI | 只是描述,不是真正持有状态 |
|---|---|---|
| fiber Node | 真正持有状态和UI对象 | |
| chrome | 拿着来自fiber node的UI对象,真正去渲染UI | 这个是交给chrome的,react没法干预 |
react只是一个dom操作框架,真正的dom是交给chrome去渲染的,react没有任何权限去干预这个过程。
而dom渲染是成本非常高的过程,因此为了性能,必须要尽可能减少dom的修改。
在用户操作dom之后,就会更新fiber node的状态为脏状态,并调用fiber node的方法,重新计算jsx,tsx。得到新的fiber node状态,进行找不同比对。
那么,我们知道现有两个tree,一个是virtual dom tree,一个是真实virtual dom tree,要想来找不同,就需要diff算法,O(N)事件复杂度。
为了继续优化,react中又提出了各种trick,比如memo, useCallback,useMemo,不管是哪个,都是为了在diff计算的时候,减少事件复杂度。
Flutter中的渲染机制
目前Flutter和React非常相似了,唯一的区别就是react没有渲染的能力,渲染全权交给chrome去了,而flutter自建了渲染引擎,不用操作系统提供的组件。
在Flutter中,和react有非常相似的对比:
| widget | 类似react中jsx,tsx | 只描述状态和UI |
|---|---|---|
| element | 类似react中的fiber node,是UI描述和真正UI对象的桥梁 | 持有状态和UI |
| renderObject | 真正能被Flutter引擎渲染的对象,被element持有 |
- 一个widget对应一个element
- 一个element持有一个widget
- 一个element持有一个renderObject
- widget通过build得到element
- element计算widget的更新,并根据不同和复用情况,绝对是否更新自己
总结
从上面可以看出,渲染机制的前两层,react和flutter几乎一样,唯一的区别就是渲染引擎,react交给了chrome,但是flutter自研了一个,性能和可控性更高。
如果是复杂的重客户端逻辑(比如视频编辑器,或者动画非常等非常复杂的逻辑),可以使用Flutter,其余情况,可以用RN。