2020面试总结 —— React Native

[fengmiaosen]

1. react native 和 flutter的优缺点

   • flutter
     • 自制绘制引擎，底层基于C++编写实现，负责渲染、文本处理等。上层Dart框架直接调用引擎，避免了JS Bridge的缺陷
     • 引擎基于 Skia绘制，操作OpenGL、GPU，不需要依赖原生组件渲染框架
     • Dart的 AOT 和 JIT两种模式，分别用于线上运行（AOT）和线下（JIT）开发，保证线上运行效率和线下开发效率。

2. JS Bridge实现原理

   https://juejin.im/post/5abca877f265da238155b6bc

2.1 JavaScript 调用 Native

• 注入API

  • iOS根据 UIWebView 和 WKWebView 有不同实现方式
  • Android分为 addJavascriptInterface(4.2之前) 和 @JavascriptInterface（4.2之后）两种注入方式

• 拦截 URL SCHEME

URL SCHEME是一种类似于url的链接，是为了方便app直接互相调用设计的，形式和普通的 url 近似，主要区别是 protocol 和 host 一般是自定义的，例如: qunarhy://hy/url?url=ymfe.tech，protocol 是 qunarhy，host 则是 hy

拦截 URL SCHEME 的主要流程：Web 端通过某种方式（例如 iframe.src）发送 URL Scheme 请求，之后 Native 拦截到请求并根据 URL SCHEME（包括所带的参数）进行相关操作

2.2 Native 调用 JavaScript

本质其实就是执行拼接 JavaScript 字符串，从外部调用 JavaScript 中的方法，因此 JavaScript 的方法必须在全局的 window 上

• iOS UIWebView 和 WKWebView调用示例

result = [uiWebview stringByEvaluatingJavaScriptFromString:javaScriptString];

[wkWebView evaluateJavaScript:javaScriptString completionHandler:completionHandler];

• android 调用示例

  • 4.4版本之前(并不能获取 JavaScript 执行后的结果)

webView.loadUrl("javascript:" + javaScriptString);

• 4.4版本之后的版本，也可以用 evaluateJavascript 方法实现

  webView.evaluateJavascript(javaScriptString, new ValueCallback<String>() {
      @Override
      publicvoidonReceiveValue(String value){
  
      }
  });
  

3. React Native线程模型

• UI线程：即Android中的主线程，负责绘制UI以及监听用户操作。
• Native线程：负责执行C++代码，该线程主要负责Java与C++的通信。
• JS线程：负责解释执行JS

4. React Native Android端 JS层调用Java层实现流程：

   JS将需要调用的方法的moduleID、methodID与arguments一块push到MessageQueue中，等待Java层的事件驱动

   

5. React Native Android端 Java层调用JS层实现流程

   

6. JNI

   在编程领域，JNI （Java Native Interface，Java本地接口）是一种编程框架，使得Java虚拟机中的Java程序可以调用本地应用/或库，也可以被其他程序调用。 本地程序一般是用其它语言（C、C++或汇编语言等）编写的，并且被编译为基于本机硬件和操作系统的程序。

7. React Native热更新之CodePush
   https://juejin.im/post/5d0b05acf265da1bc5526908

参考资料

• react-native通信机制
• react-native通信机制
• React Native 性能优化指南
• JSBridge的原理
• H5 与 Native 交互之 JSBridge 技术
• React-Native简介与运行原理解析（Eg：ios）