相反，这是另一个关于我如何切换到新框架的故事。该
材料并不表示最终真理。这里只介绍我自己选择的那些解决方案，这些解决方案在React＆React Native开发中具有很大的背景，对我来说最容易应用于实际项目。
语境
首先，我将描述上下文。订单已经出现-编写一个小的（约15个屏幕）跨平台移动应用程序。自然，出于习惯，我开始在React Native中进行操作。在两周内，该应用程序的实施率约为80％。
上周末，我阅读了哈布雷（Habé）Surf上的另一篇有关调查结果的文章。想法来了，为什么不尝试呢？我是否可以为我重复关于新框架的内容？决定度过一个周末尝试一下。结果，在接下来的一周中，不仅重写了之前的80％，而且还重写了剩余的20％。开发时间减少了一半以上！
优点
首先，优点是布局速度。屏幕铆钉非常快。线性渐变，SVG，GIF-几乎全部可用。重叠的组件（位置：绝对）-完全没有问题。只需单击一下手指，任何导致React Native疼痛的事情都可以完成。动画通常是童话！在Flutter上，具有不断变化的动画的相同屏幕所花费的时间减少了几倍。
缺点
有两个明显的缺点。首先是文档。俄语很少。官方英语的结构不是很好，是的，它提供了很多有用的代码示例，但是很难理解应用程序的一般体系结构中的一些有意义的内容。
第二个缺点是包装。那里仍然一片混乱。为您想要的软件包选择一个非常好的软件包并不是一件容易的事。在某处某个功能不起作用的地方，在其他地方。很多时间花在选择上。作为一种选择-自己添加一些东西，但这是我习惯的时候）
经验：钩
我对React的了解可以追溯到普通课程刚刚出现的日子。现在我无法想象他没有钩子，已经忘记了上课。对于flutter，有一个很棒的flutter_hooks库，它允许您将熟悉的钩子带入项目。对我来说，它完全取代了StatefulWidget。有很多钩子，您可以编写自己的钩子，但是在我的代码中最经常使用useEffect，useState和useMemoized。对于动画，请使用AnimationController。
也许这不是最好的解决方案（我已经准备好阅读注释中的弊端），但是它允许您自己在新框架中使用React的背景。我什至看不出任何理由提供示例代码-所有React开发人员都以我们为父而闻名！
经验：国家管理
一次，我不得不使用redux，mobx甚至是外来工具，例如storeon。似乎它（redux / mobx）也在Flutter之下，但是，坦率地说，我没有掌握它）。我认为，与React相比，那里的一切都太复杂了。您当然可以花更多的时间来解决问题，但是为什么当我找到一个更好的解决方案：riverpod时。
从库雷米Rousselet，作者flutter_hooks -他们自然都工作很好）。实际上，它是一个修改的Provider。只需添加到您的runApp（ProviderScope（...））包装其他所有内容，并获得整个应用程序的全局范围，可从任何小部件访问。这是足以写入useProvider（的providerName ）中的构建方法HookWidget，我们必须从指定的供应商提供的数据。
库中有很多提供程序选项，但是最基本的是ChangeNotifyProvider和StateNotifyProvider。可以从小部件中安全删除所有业务逻辑，并将其转移到这些提供程序。而且，它们彼此完美地结合在一起，从一个方法访问另一个方法和数据并不困难。
图案与redux鸭子非常相似就我个人而言，这种方法已成为React世界中最接近的方法。只有“鸭子”更小。这里要记住的主要事情是，有许多小型提供程序将用在不同的小部件中，而不是大型的小提供商，因为实际上已更改的那些小部件将被重绘。
令人失望：网络
在开发了移动应用程序后（对我自己而言）取得了压倒性的成功之后，我像任何自重的完整堆栈一样，决定接触Flutter进行网络开发。同样，重写真正有效的公司应用程序之一。
当然，Flutter Web仍处于beta版本，下面描述的所有内容专门适用于beta版本。我真的希望，随着版本的发布，情况会有所改善。但是，尽管如此，Flutter让我感到失望。
您需要了解Flutter Web的第一件事不是关于网站，而是关于应用程序！那些。有必要以与移动设备相同的方式进行书写。所有小部件都相同。您不能在代码中使用第三方JS。仅通过dart：js访问它。也可以通过dart访问html ：html... 这几乎切断了网络世界中已经完成的所有工作。如果您想在CSS + JS中某个地方实现酷炫的动画，则不能这样做，在flutter上编写一个模拟或使用dart：js并不总是那么容易。轻松使用现成的JS / css库是不可能的。
第二个缺点是包装！尽管在pub.dev上，大多数都被标记为同时支持Web，Android和ios，但通常一个或另一个都可以工作。那些。您将无法创建完全跨平台的代码。
Web程序包通常是js对应程序的包装。但是几乎总是他们不跟上他们包装的包装的版本。
例：
任务是通过MS进行授权并接收用户数据。
在旧的JS中，一切都很简单：以msal和微软/ microsoft-graph-client-并享受结果。在
Flutter中找到msal_flutter，连接...原来该Web软件包不支持。好的，我们找到了msal_js-这是对普通msal的包装，因此您需要通过良好的旧脚本标记将其包含在index.html中。但是，如果msal已更新至1.4.2，则此软件包最多支持1.3.0！
好吧，好了，我们悲伤地得到了一半的令牌，那么用户数据呢？有一个软件包microsoft_graph-没有任何文档。要找到所需的方法，您需要进入程序包代码并在其中进行戳戳。最终发现只有一对实现的用于处理任务！查找其他msgraph-因此通常唯一的方法支持！
幸运的是，该协议本身并没有那么复杂，您可以在需要工作时快速编写自己的东西，而无需编写库）
环境
第三个也是最大的缺点是无法设置环境。Flutter Web在浏览器中或作为Web服务器运行。您仍然可以通过命令行参数设置将在其上旋转的端口（这也不是很方便，config在哪里！！）但是我如何使用自签名证书将其作为https运行呢？这样一来，热负载就可以正常工作并进行调试，而其他通常正常工作的芯片又可以工作？你好！伙计们，2k20结束了，您还有http吗？真？！
结论
毫无疑问，Flutter作为跨平台移动开发的框架，正在将React Native撕成碎片。我很满意，客户也很高兴-您还需要什么？
但是，作为编写Web应用程序的工具，它仍然很潮湿且太费力。准备好在几秒钟内连接第三方js包的地方，这里将为它写几天的包装，或者甚至在Flutter上编写自己的类似物。
聚苯乙烯
对于那些从本文开头忘记的人，我将再次重复。我描述的适用解决方案和结论是一个在Flutter具有1周背景并且在React中具有3年背景的人的结论。因此，不要以他们为最终真理。我准备在与专家的评论中讨论我做错了什么。