2026年,Flutter和React Native到底选哪个

2643
6 分钟阅读
2026年,Flutter和React Native到底选哪个
"AI摘要: 本文从技术角度深入探讨了Flutter和React Native在渲染机制上的区别。文章首先概述了两者在市场和生态上的相似性,随后详细分析了它们各自的渲染原理。通过对比JSX/tsx、fiber node与widget、element等核心概念,揭示了React依赖Chrome进行DOM操作与Flutter自建渲染引擎之间的根本差异。此外,还介绍了如何通过优化手段减少diff计算复杂度以提升性能,并总结了各自适用场景。"

如果从市场和生态的角度上讲,在快2026年的今天,Flutter和React Native几乎没有什么太大区别(比如GitHub stars数量,GitHub中仓库的数量,第三方包的数量)

这里其实是从技术的角度讨论,Flutter和React目前的情况,他们到底有哪些区别

渲染原理

不管是那种技术,只要是渲染UI,基本都摆脱不了下面的三层结构:

flowchart TD A[状态和UI描述的定义] -->|初始创建| B[持有状态和UI的对象] B -->|计算新的状态 / diff| C[更新的UI描述] C --> D[渲染引擎] D --> E[真正绘制出来的UI] E --> F[用户操作(点击...)] F -->|触发对象状态重新计算| B %% 可选优化,区分初始渲染和更新渲染 B -->|首次渲染| D C -->|状态更新渲染| D

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持有
graph LR subgraph Configuration ["蓝图层 (不可变)"] W("Widget<br/>(配置/元数据)") end subgraph Infrastructure ["骨架层 (可变/逻辑)"] E("Element<br/>(上下文 Context)") S[("State<br/>(状态数据)")] end subgraph LayoutPaint ["渲染层 (布局/绘制)"] RO("RenderObject<br/>(布局 & 绘制指令)") end subgraph Composite ["合成与显示"] L("Layer Tree<br/>(图层合成)") GPU("Engine/GPU<br/>(光栅化上屏)") end %% 关系流向 W --"1. createElement()"--> E E --"2. 持有引用"--> W E -.-> S S --"setState()"--> E E --"3. createRenderObject()"--> RO RO --"4. updateRenderObject()"--> E RO --"5. paint()"--> L L --"6. Rasterize"--> GPU %% 样式调整 style W fill:#e1f5fe,stroke:#01579b,stroke-width:2px style E fill:#fff3e0,stroke:#ef6c00,stroke-width:2px,stroke-dasharray: 5 5 style RO fill:#e8f5e9,stroke:#2e7d32,stroke-width:2px style L fill:#f3e5f5,stroke:#7b1fa2,stroke-width:2px style S fill:#ffcdd2,stroke:#c62828,stroke-width:2px
  • 一个widget对应一个element
  • 一个element持有一个widget
  • 一个element持有一个renderObject
  • widget通过build得到element
  • element计算widget的更新,并根据不同和复用情况,绝对是否更新自己

总结

从上面可以看出,渲染机制的前两层,react和flutter几乎一样,唯一的区别就是渲染引擎,react交给了chrome,但是flutter自研了一个,性能和可控性更高。

如果是复杂的重客户端逻辑(比如视频编辑器,或者动画非常等非常复杂的逻辑),可以使用Flutter,其余情况,可以用RN。