React-native的新架构

最新推荐文章于 2024-09-08 07:45:26 发布

溪抱鱼

最新推荐文章于 2024-09-08 07:45:26 发布

阅读量995

点赞数

文章标签：架构 javascript 前端 react native

本文链接：https://blog.csdn.net/weixin_40430133/article/details/130242078

版权

文章介绍了React-native的样式处理，包括Flexbox和影子线程。新架构通过JSI移除了旧的桥接器，引入了Hermes引擎以提高性能。TurboModules优化了模块加载，Fabric改进了UI渲染效率。此外，文章提到了ReactNavigation作为路由库，启动页、图标库和异常处理的解决方案，以及包更新的技术。

摘要由CSDN通过智能技术生成

1、React-native的style

上一篇文章，我们应该已经对跨平台有了一定的概念，但这里其实有一个问题并没有解决，就是其实在ios和安卓上的样式是有差异的，那么我们的Rn就需要去抹平这种差异化，rn中采用的是css-in-js，使用Flexbox,能确保在不同屏幕下一致的布局。

我们在js中写的style对象，在native中将由单独的一个线程去处理，就官网叫做影子线程（Shadow thread）。在这个线程中由Yoga引擎（这也是facebook开发的）重新去计算app的布局，这个引擎在计算了有关app界面的东西后，将结果又反馈至native线程，最终呈现出来。

那么一个完整的老版本的架构是这样的：
在这里插入图片描述
大伙现在应该已经对一个rn的整体架构有了基本的了解，还记得上篇文章的问题吗？桥的负载会导致性能问题，那么新的架构就是为了去解决这个问题。

2、React-native新架构

关于新架构的内容很多，可能有些地方我自己也有理解不当的地方欢迎指正。

我们先讲讲最大的改动，就rn在新架构中直接把老的桥干掉了，直接换成了一个新的中间层或者说通用层，也就是 JS Interface (JSI)。在这个通用层里面有很多的新内容我们可以先看一下这个架构图，有个概念再往下看。

在这里插入图片描述

So，我们来看看有哪些变化，上面的图中间部分，就是JSI。（解释一下为啥这个图是这样的，因为就Turbo Modules我其实认为是Native Moudles的加强，而Fabric是Renderer的加强）。

1、JS-bundle不在强依赖于JavaScriptCore(后续都用jsc简称了)引擎了。我们现在可以很方便用更好的引擎去替换了，性能更好了。比如Hermes。

2、JSI让我们可以直接在js层调用native的方法了。JSI是c++/oc写的,JSI中间层直接存储了native层的引用和属性（就是把native层的东西绑定到了全局），然后我们js就可以调用java/oc的api。

3、Turbo Modules的出现（上图中的Native Moudles），在之前的架构中 JS 使用的所有 Native Modules（例如蓝牙、地理位置、文件存储等）都必须在应用程序打开之前进行初始化，这意味着即使用户不需要某些模块，但是它仍然必须在启动时进行初始化。

Turbo Modules 基本上是对这些旧的 Native 模块的增强，正如在前面介绍的那样，现在 JS 将能够持有这些模块的引用，所以 JS 代码可以仅在需要时才加载对应模块，这样可以将显着缩短 RN 应用的启动时间。

4、Fabric也就是上图中的renderer，一个新的UI渲染器，它就相对于在c++中，可以直接创建一个 Shadow Tree，一个就是快，也减少了渲染特定元素的步骤。

可能大家没懂，举个例子：当 App 运行时，React 会执行你的代码并在 JS 中创建一个 ReactElementTree ，基于这棵树渲染器会在 C++ 中创建一个 ReactShadowTree。Fabric 会使用 Shadow Tree 来计算 UI 元素的位置，而一旦 Layout 完成，Shadow Tree 就会被转换为由 Native Elements 组成的 HostViewTree（例如：RN 里的会变成 Android 中的 ViewGroup 和 iOS 中的 UIView）。

5、 codegen其实就是一个静态类型检查器，CodeGen使用类型确定后的 JavaScript 来为Turbo Modules和 Fabric定义供他们使用的接口元素，并且它会在编译时生成更多的native代码，而非运行时。

3、走近一点

Ok，上面都是框架的架构设计，我们先有一个大体的概念，那么现在我们稍微走近实战去了解一些必要的模块。

React-native只内置了一些必要的包为了尽可能的减小包的大小，然后rn是个可扩展框架，许多的包需要你自己去下就像asyncStorage这种，这种装包你也需要一点点依赖相关的原生知识，但问题不大，一般都会有模版去教你，照着抄就行了（但也不一定，绝大数情况是）。那么我们现在就看看一些基本上是必要的包。