This isn’t the type of article you might think it’s going to be. I’m not going to list the pros and cons of every framework and I am not going to do a comparative analysis of performance.

这不是您可能会想到的文章类型。我不会列出每个框架的优缺点，也不会对性能进行比较分析。

Over the past few weeks, I have dipped my coding hand in trying to create simple, functional applications using both frameworks. The title of this article is the conclusion I have come to from my experimentation.

在过去的几周中，我竭尽全力尝试使用这两个框架创建简单的功能性应用程序。本文的标题是我从实验中得出的结论。

⚠️ Disclaimer: I am in no way stating that framework A is better than framework B and I have not been paid by neither to give my opinion. This is solely an article based on my personal experience and nothing more.

Dis️免责声明：我绝不说框架A比框架B更好，而且我也没有给我任何意见。 这只是一篇基于我个人经验的文章，仅此而已。

一些背景 (Some Background)

While I am not familiar with either Dart or React, I have some background in JavaScript and more than my fair share of Native development. Since these two frameworks are relatively new and are offering the same type of development experience, I thought I’d give them a try to see what the whole fuss is about. Granted, I am not profoundly adept in the whole logic of both and I have yet to fully understand the state component in React or the component hierarchy in Dart. With that being said, I set out to create a basic application in both platforms. The premise for the application? One that would accept user input, and on a touch of a button will display the user input in some sort of list that the user can scroll through on the screen.

尽管我对Dart或React都不熟悉，但我对JavaScript有一定的了解，并且对本机开发有相当的了解。由于这两个框架相对较新，并且提供了相同类型的开发经验，所以我认为我将尝试尝试一下整个过程。当然，我对这两者的整体逻辑并不十分精通，并且我还没有完全理解React中的状态组件或Dart中的组件层次结构。话虽如此，我着手在两个平台上创建一个基本应用程序。申请的前提？接受用户输入并按一下按钮的用户将以某种列表显示用户输入，用户可以在屏幕上滚动浏览。

我的React (My REACT-ion)

I first started working on the application using React Native. Setting up the project was very simple. All you had to do was follow through on the instructions in the Getting Started documentation. I installed Expo and within minutes, my application was loading on my phone. I really appreciated the speed in which the QR code scanner of the Expo application identifies the code on the screen. Expo’s interface on the computer was also really straight forward. You can see the status of the application (building or failing), boot up an Android/iOS emulator and more. Now it was time to put my own logic into the application. This is where things got frustrating.

我首先开始使用React Native来处理应用程序。设置项目非常简单。您所要做的就是按照《入门指南》文档中的说明进行操作。我安装了Expo，并在几分钟之内将我的应用程序加载到手机上。我非常感谢Expo应用程序的QR码扫描器在屏幕上识别代码的速度。 Expo在计算机上的界面也非常简单。您可以查看应用程序的状态(正在构建或正在失败)，启动Android / iOS模拟器等。现在是时候将我自己的逻辑放入应用程序中了。这就是令人沮丧的地方。

Swapping the View element with a text input was easy, and so was adding a button with an onClick action. But trying to have a data set to save the user input, was down right mind boggling. I made a variable which was an array in the state object and tried various ways to update it when the user finished entering his/her own input. I have searched high and low and implemented various solutions to allow my application to save data to the array, but to no avail. The documentation I did find was sparse and it wasn’t really helpful. Not to mention the plethora of compilation errors I was having, which were not that instructive into what was wrong with my code. After a while, it became quite annoying seeing that red screen repeatedly.

用文本输入交换View元素很容易，添加带有onClick动作的按钮也很容易。但是试图拥有一个数据集来保存用户输入，却是令人费解的。我在状态对象中创建了一个变量，该变量是一个数组，并在用户输入完自己的输入后尝试了各种方法对其进行更新。我搜索了很多内容，并实施了各种解决方案，以使我的应用程序可以将数据保存到阵列，但无济于事。我确实发现的文档很少，而且并没有真正的帮助。更不用说我遇到的过多编译错误，这些错误对于我的代码出了什么问题没有启发性。一段时间后，反复看到红色屏幕变得很烦人。

飘飘 (Fluttering Away)

Being flustered and ashamed I couldn’t make the simplest of applications using React, and following the announcement of Flutter, I thought I’d take a crack building the same application. You know what they say, change of place - change of luck.

由于感到慌乱和羞愧，我无法使用React使最简单的应用程序变得简单，在Flutter发布之后，我认为我会努力构建相同的应用程序。 你知道他们在说什么，地点的改变-运气的改变。

Setup was a breeze and offered the same quick experience React afforded and I was ready to start developing in no time. Downloading the Flutter SDK and installing the plugin were part of just a few simple steps to start developing in Flutter.

设置轻而易举，并提供了React提供的相同的快速体验，我准备立即开始开发。下载Flutter SDK和安装插件只是开始在Flutter中进行开发的几个简单步骤的一部分。

Next came the task of looking at the code. How can I put it into words? Not what I was expecting. You have different components in a long and winding hierarchy, which at times, can be difficult to keep track of. Apart from that, you have widgets and columns and rows and you need to figure out where everything fits in together. By now, you are thinking I am supposed to tell you why I like Flutter. As most things are, they have their strengths and weaknesses. And after going over the things I think are irritating, I can relish in what I found endearing.

接下来是查看代码的任务。我该如何用语言表达呢？不是我所期望的。您在冗长而曲折的层次结构中具有不同的组件，有时可能难以跟踪。除此之外，您还具有小部件，列和行，并且需要弄清楚所有内容在哪里组合在一起。现在，您认为我应该告诉您为什么我喜欢Flutter。就大多数情况而言，它们各有优缺点。在审阅了我认为令人讨厌的事物之后，我可以品尝一下我发现的可爱事物。

For starters, Flutter is heavily documented. Every time I had to look up for something, I could easily find it in the documentation. More so, there are so many real life examples of various applications out there, that you are bound to find one similar to something that you are trying to make.

对于初学者来说，Flutter有大量记录。每次需要查找时，都可以在文档中轻松找到它。更重要的是，这里有很多关于各种应用程序的真实示例，您必然会找到与您尝试制作的类似的应用程序。

After tinkering with the starter code, you start to get a hang of the hierarchy, and how views are displayed, that you come to understand the weird intricacies of it all. It was also a blast to realize that making a component behave a certain way was as easy as adding another characteristic to the widget.

修改了入门代码后，您开始了解层次结构，并了解视图的显示方式，从而了解所有这些内容的怪异复杂性。意识到使组件以某种特定方式工作就像向小部件添加另一个特性一样容易，这也是一个爆炸。

And above all, I was already in a native setting. I was at home with Android Studio, understanding where everything goes and enjoying the luxuries and benefits of a familiar surrounding.

最重要的是， 我已经处于原生环境 。我在Android Studio的家中，了解一切进展并享受熟悉的环境带来的奢华和好处。

Compared to the time I spent trying to develop my application in React, the time I spent in Flutter was a fraction of that. Plus, even if what you are trying to do doesn’t always work, you get the sense of eventual progress and you are encouraged to look at things in more detail inside the documentation.

比起我花了试图开发我的申请做出React的时候，我在扑花的时间的一小部分。另外，即使您尝试执行的操作并非总是有效，您仍会感觉到最终的进展，因此鼓励您仔细阅读文档中的内容。

Angry 😠? Upset 🙍? Exhilarated 😂? Jubilant? 🙌 Let me know what you think.

生气😠？心烦🙍？ 😂？喜庆？ 🙌让我知道你的想法。