reactnativejs

① React 、React.js、React Native三者关系

React：
React 是基础框架，是一套基础设计实现理念，开发者不能直接使用它来开发移动应用或者网页。
React.js:
在React框架之上，发展出了React.js 框架来开发网页。
React Native：
在React框架之上，发展出来React Native 用来开发移动应用。

ps：因为React 基础框架与React.js框架是同时出现、同时进化发展的，这就造成了React基础框架的基本概念、设计思想都是在React.js的相关文档中描述的。后来，Facebook退出了React Native 后，也没有把React的相关概念文档从React.js文档中分离出来。这就导致出现了学React Native 要去看React.js文档，说React Native 不时会说到React.js的情况。

② React Native JSBundle拆包之原理篇

React Native JSBundle拆包原理主要包括以下几点：

1. 打包方式优化：

   • 早期React Native的jsbundle打包方式包含了所有代码，包括RN源码、第三方库和自定义业务代码。
   • 为了解决代码重复和内存占用问题，开发者将重复的RN代码和第三方库打包成基础包，各业务在此基础上开发，形成业务包。这种方式降低了内存占用，减少了加载时间，并优化了热更新流量带宽。

2. 拆包工具：

   • molespacker：由携程框架团队研发，适用于RN0.4.0版本之前的分包，但维护成本较低，使用人数不多，兼容性相对较差。
   • diff patch：通过比较两个版本的jsbundle，生成业务包，实现基础包和业务包的分离。这一方法主要使用googlediffmatchpatch等工具。
   • metro bundle：由facebook官方提供，从RN 0.50版本引入，并随着RN版本的迭代不断完善。它支持差分包热更新，配置时主要关注createMoleIdFactory和processMoleFilter等参数。

3. 启动流程与加载机制：

   • JS端启动：以index.js为默认入口，通过AppRegistry.registerComponent方法注册应用，原生系统加载应用代码包并最终运行应用。
   • Android端启动：MainActivity作为原生层入口，继承自ReactActivity，通过MainApplication类初始化ReactActivityDelegate，加载应用并执行启动过程。
   • ReactActivityDelegate：负责启动应用的关键步骤，包括加载应用、生成上下文对象、注册模块、创建CatalystInstance，并与ReactApplicationContext关联，最终加载JSBundle文件。
   • JSBundleLoader：用于存储JS包信息，允许CatalystInstance加载正确的JS包，实现JS和Java层面的相互调用。

4. JSBundle的加载与显示：

   • 在ReactContext创建完毕后，通过UIManagerMole将JS组件转换成Android组件，并显示在ReactRootView上。

总结：React Native的JSBundle拆包机制通过优化打包方式、使用不同的拆包工具以及精细的启动流程和加载机制，实现了代码的优化和热更新的高效执行。这一机制确保了React Native应用在跨平台开发过程中的灵活性和性能优化。

③ ReactJS到React-Native，架构原理概述

ReactJS到ReactNative的架构原理概述如下：

1. ReactJS的核心原理： 虚拟DOM：ReactJS通过引入虚拟DOM的概念，在内存中构建DOM模型，并通过计算虚拟DOM与实际DOM之间的差异来高效地进行DOM更新，从而优化渲染性能。 高效更新机制：ReactJS能够高效地计算出最小的DOM更新集，显著减少对浏览器资源的消耗。

2. React Native的跨平台特性： 基于React的扩展：React Native是基于React的跨平台UI框架，使用JavaScript构建原生应用。 调用原生API：React Native通过调用宿主平台的原生API来渲染UI组件，实现原生应用的性能和用户体验。

3. 渲染过程与组件生命周期： 渲染机制差异：React Native的渲染过程依赖于桥接，JavaScript通过桥接调用宿主平台的基础API和UI元素。 组件生命周期：React Native的组件生命周期与ReactJS基本相同，但渲染过程有所不同。

4. 样式布局与组件编写： Yoga布局引擎：React Native使用Yoga这个跨平台的CSS3/Flexbox布局引擎，提供简单且一致的样式语言来布局UI元素。 组件编写方式：React Native的组件编写方式与HTML有所不同，但可以复用Web开发的经验，如View组件类似于div标签，Text组件类似于p标签。

5. 交互、动画与导航： 交互与动画：React Native提供Animated API和PanResponder等支持组件的动态效果和手势交互。 导航管理：通过Navigator组件提供简单直观的方式来管理应用中的页面和屏幕跳转。

6. 与原生平台的交互： 桥接机制：React Native与原生平台的交互通过桥接实现，负责将JavaScript代码与宿主平台的原生代码进行沟通，确保应用的性能和稳定性。

综上所述，从ReactJS到React Native，开发者能够利用相同的JavaScript代码库构建出跨平台的原生应用，同时享受到React提供的高效、响应式和可复用的UI构建方式。