【每天学习一点点 day03】React Native 跨端原理 - 我相信我现在做的能给我的人生带来希望

哈喽大家好，2024年1月24日我将开启打卡【每天学习一点点】，主要内容为记录和分享每日学习内容，学习的类型不限（全凭个人兴趣，哈哈哈，不一定今天能学点啥）

2024Q1计划是移动端：①uniapp②React Native③Flutter④小程序⑤原生开发，暂时打算每个部分都先从了解其背后的逻辑入手，再到上手的项目，目的之一是为了找出不同框架的相同之处。

鸿蒙开发最近也了解了一下，但是目前还没有加入上半年的学习计划。

day3 - React Native开发app

官网地址：简介 · React Native 中文网

React Native 提供的原生组件就是对原生视图的封装，因此使用 React Native 编写的应用外观、感觉和性能与其他任何原生应用一样。

1. uniapp和react native的对比

uniapp - vue	基于webview进行渲染
uniapp - nvue	基于weex的扩展（weex为原生视图的渲染器）
react native	基于原生视图的封装

2. 什么是React Native

参考资料：What is React Native_哔哩哔哩_bilibili

我们常用于开发web并且运行在pc浏览器上的的React = React.js + React DOM（类似于vue3拆分出来的compiler和runtime）

Vue3	compiler + runtime
UniApp	编译器 + 运行时
React - PC	React.js + React DOM
React - Mobile	React.js + React Native

compiler/编译器/React.js负责构造跨平台，抽象的render tree（diff算法也是通过抽象树来进行比对的），而runtime/运行时/React DOM/React Native负责将抽象数据结构分别渲染到不同的平台。

React Native is a separate liberary which in the end is a collection of special React component it gives you, so a collection of components you can use in your React app and these components are special because React Native actually knows how to translate them, how to compile these components to native widgets for iOS and for Android.

So React Native kind of is like React DOM, it knows how to talk to native platform, to Andriod and iOS and how to render native widgets and it gives you a bunch of these widgets as React components so that you can build a user interface with these compilable components.

由于React Native是基于原生组件封装的，所以类似于uniapp，在RN中不可以使用如<div>这样的元素，并且文字要用<Text>进行包裹。

3. React Native工作原理

与uniapp相似的地方在于，React Native也区分为视图层和逻辑层，视图层将视图代码翻译为原生组件，逻辑层是负责执行js的执行引擎

	视图层	逻辑层
uniapp - vue	基于webview进行渲染	v8/js-core
uniapp - nvue	基于weex的扩展（weex为原生视图的渲染器）	v8/js-core
react native	基于原生视图的封装	v8/js-core (<0.70) Hermes (>=0.70)

为什么说React Native性能 > uniapp？个人观点，是因为原生渲染导致页面看起来更加流畅，渲染性能高，外加专门针对于React Native优化的新的Hermes引擎。