最后
小编综合了阿里的面试题做了一份前端面试题PDF文档,里面有面试题的详细解析
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
虽只说了一个公司的面试,但我们可以知道大厂关注的东西并举一反三,通过一个知识点延伸到另一个知识点,这是我们要掌握的学习方法,小伙伴们在这篇有学到的请评论点赞转发告诉小编哦,谢谢大家的支持!
文章目录
一、前言
先带大家分析2张架构图,对RN大致的运行加载过程有个印象。
ReactNative
系统框架图如下所示:
启动流程图如下所示:
在开始分析之前,先思考一个问题:
为什么
ReactNative
能像web
端一样实现跨端和热更新,同时又有接近Native
的性能呢?
ReactNative
的本质是在 JS
端编写 React
代码,通过 JavaScriptCore
引擎,把 JS
端编写的组件和事件转换成 Native
原生组件进行渲染,如下图:
理解 ReactNative
的实现原理,主要是搞清楚 JS
端与 Native
端的通信原理。而要保证 JavaScript
和 Native
具备向对方通信的能力,首先需要搞清楚 RN 在启动的时候都做了哪些事情,这篇文章就是基于 ReactNatve
源码分析的基础上,对 ReactNative
的启动流程进行深入浅出的分析。
二、概述
ReactNative
启动的入口是啥?
ReactNative
启动是从创建一个RCTRootView
作为入口视图容器开始运作的,创建RCTRootView
时,会先创建一个JSBridge
作为Native
端与JS
端交互的桥梁。整个RN
的启动工作基本都是在创建JSBridge
时做的。JSBridge
的核心是RCTBatchedBridge
,JSBridge
的工作主要在RCTBatchedBridge
初始化中处理。启动流程采用GCD
来进行多线程操作,其中大部分耗时操作是在并发队列com.facebook.react.RCTBridgeQueue
中进行的。
RCTBatchedBridge
启动主要进行六个准备工作:
1.加载
JSBundle
代码(并行队列异步执行)
2.初始化Native Modules
(同步执行)
3.初始化JSCExecutor
(与第4步在同一并行队列同时执行)
4.创建Module
配置表(与第3步在同一并行队列同时执行)
5.注入Module
配置信息到JSCExecutor
(第3、4步执行完再执行)
6.执行JSBundle
代码(前5步都执行完再执行)
简单说,JSBridge
的初始化就是从加载js
源代码(JSBundle
)到JSBundle
能被原生端执行的过程,具体做了哪些准备工作呢?首先,ReactNative
的js
组件及事件最后都会映射成原生组件,而所有原生组件暴露给 JavaScript
的类都在Native Modules
里。那么,js
端是怎么映射到原生组件的呢?是通过Module
配置表找到Native Modules
里对应的类。最后,js
调用原生方法等交互,及映射成原生代码都是通过JSCExecutor
。
所以JSBridge
的初始化操作,也就是对JSBundle
、Native Modules
、Module
配置表、JSCExecutor
四个模块进行初始化,具体逻辑流程图如下:
1. 加载 JSBundle
代码(异步)
JSBundle
:React
代码经过打包后生成的JavaScript
源码和图片等资源文件;
热更新的实质:将JSBundle
放在服务器,在合适时机(启动/切换前后台/打开某个页面按需加载等),将JSBundle
下载到本地来实现热更新;
将 JavaScript
源码加载到内存中,方便之后注入和执行,这一步中,React
中的 JSX
语法已经转换成 JavaScript
。执行代码如下:
[RCTBatchedBridge loadSource: onProgress:]
2. 初始化 Native Modules
(同步)
同步初始化所有不能被懒加载的供 JS
端调用的 Native
模块。
Native Modules
:所有Native
需要暴露给JS
的类(即标有宏:RCT_EXPORT_MODULE()
的类)
主要作用:找到所有 Native
需要暴露给 JavaScript
的类(即被标记有宏:RCT_EXPORT_MODULE()
的类),方便后面把这些模块信息注入 JS
端。执行代码如下:
[RCTBatchedBridge initModulesWithDispatchGroup:]
3. 初始化 JSCExecutor
(异步)
JSCExecutor
是JavaScriptCore
引擎,负责JS
端和Native
端的通信。
执行代码如下:
[RCTBatchedBridge setUpExecutor]
1.初始化时,创建一个优先级跟主线程优先级同级的单独 JS
线程,同时创建一个 Runloop
,让 JS
线程能循环执行不会退出。
JavaScript
-
js的基本类型有哪些?引用类型有哪些?null和undefined的区别。
-
如何判断一个变量是Array类型?如何判断一个变量是Number类型?(都不止一种)
-
Object是引用类型嘛?引用类型和基本类型有什么区别?哪个是存在堆哪一个是存在栈上面的?
-
JS常见的dom操作api
-
解释一下事件冒泡和事件捕获
-
事件委托(手写例子),事件冒泡和捕获,如何阻止冒泡?如何组织默认事件?
-
对闭包的理解?什么时候构成闭包?闭包的实现方法?闭包的优缺点?
-
this有哪些使用场景?跟C,Java中的this有什么区别?如何改变this的值?
-
call,apply,bind
-
显示原型和隐式原型,手绘原型链,原型链是什么?为什么要有原型链
-
创建对象的多种方式
-
实现继承的多种方式和优缺点
-
new 一个对象具体做了什么
-
手写Ajax,XMLHttpRequest
-
变量提升
-
举例说明一个匿名函数的典型用例
-
指出JS的宿主对象和原生对象的区别,为什么扩展JS内置对象不是好的做法?有哪些内置对象和内置函数?
-
attribute和property的区别
-
document load和document DOMContentLoaded两个事件的区别
-
JS代码调试