Flutter和React Native对比

一、渲染机制

首先，说点题外话，让我们回顾一下历史，在2000年代初期，Java就有两种UI框架。一个是AWT，它是一个跨操作系统的UI开发框架，而且能够自动适配操作系统的外观和交互，在AWT框架中，有很多内置的组件能和操作系统中的组件相对应。另外一个是Swing，它和AWT不同的是，它不依赖操作系统的组件，而是自己完成渲染过程，最终Swing战胜了，AWT退出了历史舞台。

它们有什么关联，为什么我要提起Java中的AWT和Swing呢？如果你曾经关注过Flutter和React Native，你应该了解React Native的组件最终会转化为对应平台的组件，比如Android和IOS，而Flutter有一套基于skia库的渲染引擎，Flutter的组件是通过这一套引擎进行渲染，类似游戏引擎，它通过内置的Material Design（Android风格）组件和Cupertino（IOS风格）组件来模拟原生平台的外观和交互体验。这么来看React Native和AWT是不是有些相似，而Flutter和Swing也有些相似呢？

二、开发模式

再说点题外话，一般针对操作系统的开发都是基于组件，而针对浏览器的开发都是机遇模版和DSL，尽管有些例外，比如WPF/Silverlight企图使用类似的模版机制（XAML）来开发针对操作系统应用，但是很快它们都以失败告终。

开发者到底需要什么？

React Native最明智的选择就是使用React，如果对React或JavaScript熟悉的开发者可以直接上手。Flutter使用Dart语言来进行开发，尽管它是一种更好的UI开发语言，但开发者还是需要花费时间去学习一门新的开发语言。

在这个人才紧缺的时代，集中精力在一个技术栈深入能够更加高效的发挥工程师的作用。

三、跨端能力

跨移动端和Web端的通用代码库怎么样？

React Native本身就是使用React技术栈来开发移动端，所以很容易通过抽象封装实现统一套代码支持Web端和移动端。

而Flutter是通过Dart转译为JavaScript来实现支持Web端，而任何代码转译都是有缺陷的。Flutter也可能提供编译为web assembly（WASM）来实现支持Web端，但是在撰写本文时，WASM仍然存在SEO和性能问题。

React Native有一些社区开发库可以实现Windows和MacOS，比如React Native for Windows。

Flutter官方已经全平台支持。

四、社区情况

Github

• Flutter，132K stars
• React Native，99.2K stars

Stackoverflow

Google Trends

五、开发效率

首先，React Native本身具有优势，JavaScript和React本身就很流行，尽管Dart入门也比较简单，但是React Native上手还是要快一些。

如果忽略这一点，Flutter开发效率应该要比React Native更高一些，但这是因人而异，之所以我认为Flutter更加高效是因为React Native需要花更多的时间进行性能优化。

由于Flutter开发工具中内置了很多对开发比较友好的功能，比如部署，CI/CD，丰富的组件库，调试器和IDE等等，而React Native需要手动集成一些第三方的社区库和工具才能实现，从这一点看，Flutter完胜React Native。

六、总结

如果你想利用现有开发人员的技术栈（假如会JavaScript和React），请使用React Native，这样能够高效利用现有资源，降低成本，否则建议选择Flutter。