乐趣区

关于前端:reactnaive工作原理

jiezi

react-naive 工作原理是从 react 的工作原理衍生进去的

react 的工作原理

在 react 中，virtual dom 就像一个中间层，介于开发者形容的视图与理论在页面上渲染的视图之间。为了在浏览器上渲染出可交互的用户界面，开发者必须操作浏览器的 Dom，这个操作代价低廉，适度操作 dom 会给性能带来影响。React 保护了一个内存版本的 DOM，通过计算得出必要的最小操作并从新渲染。如下图：

执行 vdom 的计算（dom diff），缩小浏览器 DOM 的反复渲染
对于 Web 环境的 react 而言，大多数开发者认为 virtual dom 的呈现次要是为了 优化性能 。vdom 的确能晋升性能，但它的次要后劲在于提供了弱小的 形象能力 。在开发者的代码与理论的渲染之间退出一个 形象层 ，这带来了很多 可能性。略微设想一下，如果 react 可能渲染到浏览器以外的其余平台呢？毕竟，react 曾经“了解”了你的利用应该如何展示。

React Native 的工作原理

如下图，这就是 React Native 的工作原理。react native 调用 Objective-C 的 API 去渲染 iOS 组件，调用 Java 接口去渲染 Android 组件，而不是渲染到浏览器的 DOM 上，这使得react native 不同于那些基于 web 视图的跨平台利用开发计划（各种小程序 uniapp\taro , 适配器转化）。

react 能够渲染到多个平台

Bridge“桥接“ 使这所有成为可能，它使得 react 能够调用宿主平台凋谢的 UI 组件。react 组件通过 render 办法返回了形容界面的标记代码。

  1. web 平台: react 最终将标记代码解析成浏览器的 dom

  2. react native 中：标记代码会被解析成特定平台的组件

    1. 如 <View> 组件将会体现为 iOS 平台的UIView

react native 目前同时反对 iOS 和 Android 两种平台。因为 virtual DOM 提供了形象层，react native也能够反对其余平台，只须要提供“桥接”即可。

react 和 react native 的不同点

框架作用的平台不同

RN是由 React 衍生进去的，两种框架都是用 JSX 开发语法，然而 RN 是用来开发真正原生渲染的 iOS 和 Andriod 挪动利用的 JS 框架，而 React 是将浏览器作为渲染平台。

工作原理不同

下面总结的工作原理

渲染周期

react 组件挂载过程 -> 从新渲染过程。

  1. React的渲染周期开始于 react 组件挂载到 DOM 之后，接着 React 进入渲染周期并依据须要渲染组件。在渲染阶段，React 将开发者在 return 中返回的 HTML 标记间接按需渲染到页面上。
  2. React Native生命周期与 React 基本相同，在渲染上因为 React Native 依赖于桥接 ，并 不在 UI 主线程运行，它能够在不影响用户体验的前提下执行这些异步调用。

创立组件

当编写 Web 环境的 React 的时候，视图最终须要渲染成一般的 HTML 元素；

而在 React Native 中，所有元素都会被平台指定的 React 组件替换，例如在 iOS 中，<View>组件被渲染成UIView，而在 Android 平台，会被渲染成View。

原生的款式

在 Web 中，应用 CSS 款式为 React 组件增加款式曾经是开发过程中不可获取的一部分了。React 通常不影响咱们编写 CSS 的形式，并且它的确让款式的动态创建更加容易（通过 state 和 props），除此之外，React 基本上不关怀咱们如何解决款式的。
非 Web 平台上有大量的办法来解决布局和款式.

咱们应用 React Native 时，只须要用一种 规范的办法 来解决款式，React 和宿主平台之间的桥接蕴含了一个缩减版 CSS 子集的实现，这个 CSS 子集次要通过 flexbox 进行布局，做到了尽量简化，而不是去实现所有的 CSS 规定。有别于 Web 平台，CSS 的反对水平因浏览器而不同，React Native 则做到了款式规定的统一。

宿主平台接口

数据存储、天文服务、操控硬件设施

我是 甜点 cc☭

公众号：【看见另一种可能】

退出移动版