2024 腾讯Techo Park - Flutter与大前端的革命_react native libchecker

作者：知新_RL | 2024-05-04 16:41:14

踩

react native libchecker

1、混合开发上 Flutter 是没有优势，甚至说很拖垮。真的是“成也萧何败也萧何”，Flutter 因为只需要平台的 Surface ，说到底就是提供一个 View 就可以了，所以它的页面堆栈和渲染树是脱离原生的，这就造成不管是和原生混合 Flutter ，还是 Flutter 混合原生都比较大的成本。

比如在原生框架中混入 Flutter ，那页面堆栈的混合就是一个大问题，虽然有不少第三方框架做这个，不过总的体验和稳定性上还是存在偏差；其次就是在 Flutter 中混入原生 UI ，最常见的就是 WebView ，也是因为 Flutter 设计的特殊性，它的性能和键盘问题一直都是让人头疼的存在。

2、也就是热更新，它没有像 ReactNative 一样成熟的 code-push 机制，打包后的二进制产物本身就不符合平台的动态化策略，虽然也有不少第三方框架利用类似映射等的方式，但是维护成本还是挺高的。
3、通过前面的介绍应该理解到，Flutter 其实是一个独立的类似游戏的引擎，所以它对内存的消耗是比较大的，特别如果你是用于混合开发的话，那相当于在你的应用里接入一个小型的游戏引擎。
4、体积，Flutter 打包后的动态库必定需要占用一定的体积，在 Android 上因为系统本身就支持 Skia 所以比较好，但是在 iOS 需要把 Skia 引擎也打包进 App 里，所以体积会变大不少。

Flutter 的嵌套问题

好了，说了那么多 Flutter 的好与坏，最后来说说大家比较关系的 Flutter 的嵌套问题。为什么可以这样设计嵌套？

其实有一定原因是： Widget 并不是真正的控件 ，如图所示的代码，其中 testUseAll 这个 Text 在同一个页面下在三处地方被使用，并且代码可以正常运行渲染，如果是一个真正的 View ，是不能在一个页面下这样被多个地方加载使用的。

在 Flutter 设定里，Widget 是配置文件告诉 Flutter 你想要怎么渲染， Widget 在 Flutter 里会经过 Element 、RenderObject、乃至 Layer 最终去进行渲染，所以作为配置文件的 Widget 可以是 @immutable，可以每次状态更新都被重构。

所以 Flutter 不怕 Widget 嵌套带来的性能问题，因为它不是正式干活的，嵌套不会带来严重的性能损失， 但是，我们同样怕嵌套带来的可视化问题啊。

对于语法嵌套问题，不可否认 Flutter 的语法糖不过丰富，但是官方其实还是提供了一些解决方法，比如把配置文件抽象化，其中就是 Flutter 里最常见的 Container 。

Flutter 中 Container 本身只是一个容器 Widget ，它通过搭配了 Padding、Align、ClipPath、ColoredBox、DecoratedBox、Transform 等基础 Widget 来实现了灵活的功能搭配。

这其实就是 Flutter 一开始提供的思路之一，所以可以看出来 Flutter 和以往大家理解的 UI 框架和跨平台框架不一样，总结一下：

首先他的跨平台方式的创新，能实现更好的性能和代码效果，它的设计也让它不会因为嵌套而带来影响体验的性能损失。
Flutter 在 Dart Framework 的分层逻辑，导致了开发者写的 Widget 只是配置文件，内部的 Element 才算是实例，而 ·RenderObject· 才是绘制对象等等，这和以往的 UI 框架不大一样。

所以如果想要理解 Flutter ，你就要先理解 Flutter 中灵魂的设计，理解 Widget 、Element 、RenderObject、Layer 等的定位和设计，这也是我之前写的书里像表达的，在第三和第四章里核心的内容。

2、 2021年大前端有怎样的技术趋势

Flutter 属不属于前端

为什么说完 Flutter 才来聊大前端呢？其实我接触过不少前端开发和我说：“ Flutter 不应该属于前端”。

但是有趣的是 Flutter 就是来源于前端 Chrome 团队。

Flutter 的创始人和整个团队几乎都是来自 Web，在 Flutter 负责人 Eric 的相关访谈中， Eric 表示 Flutter 来自 Chrome 内部的一个实验，他们把一些乱七八糟的 Web 规范去掉后，在一些基准测试的性能居然能快 20 倍，因此 Google 内部开始立项，Flutter 出现了。

所以语法糖也少了。

另外 Dart 也是起源于 Web ，可以说 Flutter 其实就是从前端诞生，并应用于客户端的技术。

跨平台在国内运用多吗？

那大前端下跨平台技术在国内的运用多吗？答案是肯定的，这里可以看一个简单的数据，我之前自己单独做过一个53款 App 的数据统计，其中对于跨平台的运用：

Flutter 有 20 款；
React Native 有 22 款；
Weex 有 17 款；

从数据就看得出来，其中不少 App 使用了两种以上的跨平台技术，甚至有三种都使用的，对于这部分数据感兴趣的可以在我公众号或者掘金上找我的的这篇分析。

另外这里我给大家推荐一个开源项目：LibChecker ，它可以查看你手机上已安装的包详细信息，不看不知道，自己看看才知道现在跨平台技术在现实中的运用情况，其中如图所示是我手机上应用使用 Flutter 、React Native 、Weex 的应用情况，所以可以看到，大前端和跨平台已经深入到各种开发需求中。

当然，跨平台需要的是平台！所以平台的原生开发是基础支撑，所以平台本身的开发是不会“凉”的，这是一个重要的前提。

跨平台不是“降维打击”，跨平台和大前端只是让开发的能力更加通用，所以通过各种跨平台能力，客户端和前端融合成了大前端，注意是“融合”。

大前端需要什么？

知识的广度，这里的广度不是指你要懂很多技术，而是你要会技术的抽象与通用能力的拓展。

当然有人就说 “嚼多不烂，杂而不精的情况怎么办？”

这个确实是个问题，但是思考这个问题之前，我在和一些网友的交流中发现，有时候大家都只是停留在思考这个问题上， 主要是用这个问题来说服自己不需要学新的 。

多而不精是对的，但是反之并不是，不是你不学多就自然而然的精了，所以这个属于个人衡量的问题。

如果按照简单的分数划分，精通不属于 0-60 分的范畴，而是 80-99分，这部分需要的毅力、悟性，最重要是要有工作平台的支持。

为什么这么说？在交流过程中一些人说想要深入xxx去精通某想技术，但是最终还是“三过门而不入”。

因为很多时候精通某项技术，是需要业务场景去验证和推进的，如果不是大体量的业务场景，没有经历过各种极端的考验，很多时候所谓的精通只是表层精通。

而大部分在“考试”中，一般人其实都可以做到范围是 75 分左右，这个75 分这就是我理解的大前端。

在 0-60 分这部分是大多数人能掌握的程度，然后 60-75 分需要费些心思就可以达到的，而这个区域内的能力是可以快速地横向应用。

所以所谓的精通不是熟练掌握了 React，Vue 等框架调用和源码的背诵，也不是精通 Flutter ，Android 等框架的 API 调用技巧，而是你理解了这些东西的核心思想和理念。

比如把 Android 上关于 Canvas 的技能就利用到 Flutter 和 Web 上；
比如响应式开发和状态管理的理解可以让我在 RN 和 Flutter 也能很好地利用，甚至未来的 Jetpack Compose 也可以快速的上手；

技术的抽象能力让你的技术可以迁移适配，所以在我的眼中，大前端的未来 “不是我会什么所以做什么，而需要什么我就能做什么。”

3、程序员为什么要写作？

这个话题其实有点“跳脱”了，但是这其实也是一个比较有用的过程。

写作的动力是什么？

其实大家都应该发现一个有趣的现象，那就是古人写诗的时候，优秀的诗句里有不少是怀才不足的主题。

“我觉得我被低估了，我希望找到伯乐。”

小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。