面试必备：React Native 技术概览

最新推荐文章于 2024-05-16 19:58:20 发布
最新推荐文章于 2024-05-16 19:58:20 发布
阅读量501 收藏 3
点赞数
分类专栏： React Native
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/WordGeGe/article/details/107013983
版权
多云转晴

一、概览

Native App 性能优越。但是受制于平台，而且多版本维护十分痛苦。因此 Facebook 曾花费大量的人力物力进行移动 HTML5 技术研发，但始终离 Native App 体验有差距。

2012年9月，Facebook 承认 “Betting on HTML5 was a mistake.”。便放弃移动 HTML5，全力转型 Native App 开发。在转型 Native App 开发后，Facebook 内部还在研发一种新的移动技术，并使用这种技术开发内部 App，这个技术便是 React Native。

2015年3月，Facebook 正式公开发布 React Native，并将该技术开源。虽然当时开发平台仅支持 Mac OS，部署也仅支持 iOS 平台。

2015年9月15日，Facebook 发布了 React Native for Android，把 Web 和原生平台的 JavaScript 开发技术扩展到了 Google 的流行移动平台 Android 上。至此，React Native 实现了跨平台的特性。

React.js React Native 二者的联系

  • React.js 是一个用来构建用户界面的 JavaScript 框架
  • React Native 是将 React.js 技术应用到移动端的框架，底层通过桥接 Native Code，结合两者使得开发和使用的体验提升

React Native 与其它移动技术的比较

在 React Native 出现前，我们通常会选择这三种移动技术（Native App、HTML5、Hybrid）之一进行开发。

  • Native App：开发原生应用自然性能最好，功能强大。但多平台版本的开发、维护要花费大量的人力物力。
  • HTML5：虽然有 Web 的优势，即灵活的布局能力、免发版的敏捷迭代潜力、优秀的跨平台特性。在新闻资讯等一些强排版、弱交互的展示类 App 上大展拳脚。但由于 WebView 在移动设备上的性能制约，始终难成大器，这也是 Facebook 放弃其的原因。
  • Hybrid：以 Cordova（PhoneGap）为代表的 Hybrid 方式集 Native App 和 Web 优点于一体，使二者相互补短。但在复杂应用的性能和体验较差。

而 React Native 原理与上面三者都不完全相同。它的底层引擎是 JavaScript Core（或 UIWebView），但调用的是原生的组件而非 HTML5 组件。这样运行时可以做到与 Navive App 相媲美的性能体验，同时因为 JavaScript 代码可以使用后端强大的 Web 方式管理，既可以做到高效开发，也可以实现快速部署和问题热修复。

React Native 的优点

  • 性能媲美原生应用
  • 开发效率高
  • 组件化开发
  • 节约开发成本
  • 实时远程调试
  • 代码热部署
  • 有效降低移动应用安装包体积

二、编程思想

React Native
Learn once, write anywhere: Build mobile apps with React

在设计思想上 RN 强调的是一次学习随处编写，即通过学习 RN 框架，从而在不同的平台上（主要是 iOS、Android）针对不同的平台差异性通过 RN 框架，编写不同平台的代码。

响应式编程范式
In computing, reactive programming is a programming paradigm oriented around data flows and the propagation of change.

在 RN 的框架设计上主要存在的难点是编程思想的转变，需要好好理解响应式编程范式，Reactive 关注的是数据的流动以及变化的传播。

组件化与单向数据流 Data Flow

利用 props 形成单向的数据流
根据 state 的变化来更新 view
利用虚拟 DOM 来提升渲染性能

Flux | Redux
软件架构: MVC->MVP->MVVM

三、主要技术点

JSX：定义直观的用户界面

组件化：组件就是状态机

单向数据流：使用 Flux（或 Redux）管理状态及数据流

虚拟 DOM：通过局部刷新，提高 DOM 渲染性能

原生模块：Swift | RxSwift

React Native 通信机制

学习路径

首推官方文档，Demo 可通过官方 Demo 学习，其它 Demo 可在 RN 学习指南及 Awesome React Native 中获取。

预备知识

  1. 熟悉 JavaScript (ES6)
  2. 熟悉 CSS
  3. 熟悉 FlexBox 布局
  4. 了解 React
  5. 了解 Node

IDE 推荐

  1. 主推：IDEA / WebStorm
  2. 官方：Nuclide
  3. 其它：Sublime、Visual Studio

相关文档

  1. RN 官方文档
  2. RN 中文文档
  3. 官方 F8 Demo
  4. RN 学习指南
  5. Awesome React Native
  6. React 官方文档
  7. React 中文文档
  8. React 入门教程1
  9. React 入门教程2
  10. Redux 文档
  11. React Native 测试
  12. F8 测试相关
  13. React Redux
  14. RN 项目目录结构参考1
  15. RN 项目目录结构参考2
  16. FlexBox
  17. RN 组件库

四、工具

Flow：JS 静态类型检测框架

Jest：测试框架

ESLint：JS 与 JSX 的语法检查框架

Babel：语法转换器

WatchMan：文件修改监控服务

五、第三方库

组件名称功能备注
redux-persistredux 框架GitHub
react-navigation导航GitHub
react-native-navigation导航GitHub
native-navigation导航GitHub
react-native-elementsUI 组件工具箱GitHub
react-native-material-kitMaterial 设计风格 UIGitHub
react-native-root-toastHUDGitHub
react-native-swiper图片轮播组件GitHub
react-native-interactable动画GitHub
react-native-animatable动画GitHub
react-native-spinkitLOAD 动画GitHub
rn-placeholder占位符GitHub
react-native-vector-icons图标组件GitHub
react-native-image-picker图片选择GitHub
react-native-lightbox图片浏览GitHub
react-native-scrollable-tab-view滚动标签GitHub
react-native-snap-carousel滑动效果组件GitHub
react-native-blur高斯模糊GitHub
react-native-calendars日历GitHub
react-native-drawer抽屉GitHub
react-native-foldview折叠效果视图GitHub
react-native-textinput-effects文字输入效果GitHub
react-native-gifted-form表单GitHub
react-native-clean-form表单GitHub
react-native-gifted-chat聊天 UIGitHub
react-native-maps地图GitHub
react-native-radio-buttons多类单选按钮GitHub
———
ActivityIndicator活动指示RN 组件
Button按钮RN 组件
DatePickerIOS日期选择 iOSRN 组件
DrawerLayoutAndroid抽屉导航视图 AndroidRN 组件
FlatList列表视图RN 组件
Image图片RN 组件
KeyboardAvoidingView躲避键盘视图RN 组件
ListView请使用性能更好的 FlatViewRN 组件
MaskedViewIOSRN 组件
Modal模态RN 组件
NavigatorIOS导航 iOSRN 组件
Picker选择RN 组件
PickerIOS选择 iOSRN 组件
ProgressBarAndroid进度条 AndroidRN 组件
ProgressViewIOS进度条 AndroidRN 组件
RefreshControl下拉刷新RN 组件
ScrollView滚动视图RN 组件
SectionListSection 列表RN 组件
SegmentedControlIOS分组列表RN 组件
Slider滑块RN 组件
SnapshotViewIOS快照视图 iOSRN 组件
StatusBar状态栏RN 组件
Switch开关RN 组件
TabBarIOS选项卡 iOSRN 组件
TabBarIOS.Item选项卡项 iOSRN 组件
Text文本RN 组件
TextInput文本输入RN 组件
ToolbarAndroid工具栏 AndroidRN 组件
TouchableHighlight触摸高亮RN 组件
TouchableNativeFeedback触摸反馈RN 组件
TouchableOpacity触摸透明RN 组件
TouchableWithoutFeedback触摸无反馈RN 组件
View视图RN 组件
ViewPagerAndroid视图页 AndroidRN 组件
VirtualizedList虚拟列表RN 组件
WebView网络视图RN 组件
老新你好
关注
专栏目录
记一次react native面试
未金涛的博客
08-07 913
1、在页面上隐藏元素的方法有哪些？ 解析 首先我们要从多个纬度来回答这个：css、vue、react、react native。同时也需要简单的说明不同方式的差异。 答案 css可以使用visibility属性 visible 默认值。元素是可见的。 hidden 元素是不可见的。 collapse 当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 “hidden”。 inherit
react-native-geolocation：React Native的地理位置API
02-03
@react-native-community/geolocation Geolocation API扩展了。 当前，在Android上，它使用 。 Google不推荐使用此API，因为它不如推荐的准确和慢。 这是我们希望在不久的将来更改的内容 。 为了将新的与React ...
一份react-native面试题
大灰狼的小绵羊哥哥的博客
08-26 2358
声明：题目是群里面看到的，并不完全。答案自己手撸 1、下面打印出b的值是？if(true){let b = 2}  alert(b). let不存在变量提升，且作用域只在代码块，输出undefined 2、const name = 'jack'; const age = 20; const person = {[name] : true, [age] : true}.  person对象
React Native面试知识点
大灰狼的小绵羊哥哥的博客
03-27 8369
1.React Native相对于原生的ios和Android有哪些优势？ 1.性能媲美原生APP2.使用JavaScript编码，只要学习这一种语言3.绝大部分代码安卓和IOS都能共用4.组件式开发，代码重用性很高5.跟编写网页一般，修改代码后即可自动刷新，不需要慢慢编译，节省很多编译等待时间6.支持APP热更新，更新无需重新安装APP 缺点：内存占用相对较高版本还不稳定，一直在更新，现在还...
ReactNative进阶（四十二）：面试必备：2023 ReactNative 经典面试题总结（含答案）
IT全栈 华强工作室
06-02 7522
React PureComponent的原理 当组件更新时，如果组件的 props 和 state 都没发生改变， render 方法就不会触发，省去 Virtual DOM 的生成和比对过程，达到提升性能的目的。具体就是 React 自动帮我们做了一层浅比较： if (this._compositeType === CompositeTypes.PureClass) { shouldUpdate = !shallowEqual(prevProps, nextProps) || !shallowEq
react native 面试题
iMingzhen的博客
03-28 1万+
2022 react native 面试题
react-native-math-view：react native的数学视图！ 没有WebView！
02-04
npm install --save react-native-math-view或yarn add react-native-math-view react-native征> 0.59 iOS： 安装react-native-svg $ cd ios && pod install 世博会 Expo不支持本机模块。 您可以将此库与react-...
react-native-template:React Native模板
05-07
Nave React Native模板。 使用 运行react-native init yourProjectName --template nave 包已配置 样式化的组件 React导航 Axios 承诺 整理配置 将.env添加到您的.gitignore文件中 您还需要从android/app/build....
react-native-shake:React Native震动事件检测器
05-15
React Native Shake事件检测器 使用此库，您可以在React Native应用程序上添加震动事件检测器。 因为react-native-shake-event不再处于活动开发中，所以我决定创建它。 请注意，它仅适用于真实设备 安装 npm ...
react-native-mock：react native的完全模拟且易于测试的版本
02-05
有兴趣帮助维持react-native-mock吗？ React本机模拟 一个完全模拟且易于测试的react native版本 要求 Node.js 4+ 最新版本的react-native 注意：该库旨在与最新版本的react-native一起使用。 如果您使用的不是...
React、React Native面试题
weixin_30451709的博客
12-20 592
1.React Native相对于原生的ios和Android有哪些优势。 react native一套代码可以开发出跨平台app， 减少了人力、节省了时间、避免了 iOS 与 Android 版本发布的时间差，开发新功能可以更迅速。等等 2.React Native的优点和缺点在哪里。 缺点：内存、转化为原生的 3.父传子，子传父数据传递方式。 props state refs 方面回答 4.如...
一份react 面试题
qq_38719039的博客
09-24 8302
声明：题目是群里面看到的，并不完全。答案自己手撸 1、下面打印出b的值是？if(true){let b = 2}  alert(b). let不存在变量提升，且作用域只在代码块，输出undefined 2、const name = 'jack'; const age = 20; const person = {[name] : true, [age] : true}.  person对象的两...
ReactNative进阶（四十二）：面试必备：2024 ReactNative 经典面试题总结（含答案(1)
2401_84616191的博客
05-16 1358
学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。(结构共享)，即如果对象树中一个节点发生变化，只修改这个节点和受它影响的父节点，其他节点则进行共享。
React/ReactNative面试攻略（偏RN）
he_wen_jian的专栏
02-13 595
React/ReactNative面试攻略（偏RN）
sbi bits(思佰益) React Native(android向) 面试经过
zt1037934363的博客
09-11 1602
本人很菜 之前的公司React Native 基本所有功能都是用js写的 原生端的很少 问了英文和日语水平 我说英文可以阅读 直接拿出了一张英文文章让我读 [x] 简述一下上个项目的情况以及你做了什么 如何让app的一个页面一直在后台保留而不会回收掉 [x] handler是什么[x] 之前的公司测试用机都用了什么品牌 有没有某个品牌特有的问题 说下广播的分类 [x] 说下服务的分类 [x] a...
React Native 常用的技术
大灰狼的小绵羊哥哥的博客
07-21 890
下一个项目公司也打算使用react native.大致看了下原型设计,写几个小demo先试试水.特此记录下. http://www.cnblogs.com/shaoting/p/7148240.html转载 1.微信及朋友圈分享.QQ及朋友圈分享,微博分享,微信支付,支付宝支付. 2.导航条渐隐 3.通讯录 4.卡片式轮播 5.时间轴 6.图片+列表的
Web前端最全React Native 新架构(1)，20道前端工程师面试必问题
最新发布
2401_84616191的博客
05-16 1193
面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。前端面试题汇总JavaScript性能linux前端资料汇总。
React Native面试题记录
weixin_30247781的博客
08-11 187
一.ES6中增加了那些新的功能？ 1>for-of循环: 使用 for-of 的时候，循环的是数组内部的元素且不会出现 for-in 中将附加属性也遍历的情况，其次，循环变量的类型和其在数组中的类型保持一致，而不是全部是 string 的情况。 var arrObj = ['alexchen',1,{}]; arrObj._name = 'attr-alexchen'; fo...
React Native面试题及常用知识
热门推荐
clf_programing
04-20 2万+
React Native面试题MONDAY. MARCH 26, 2018 - 2 MINSREACT NATIVE本文原创首发于公众号：ReactNative开发圈，转载需注明出处。本文会不定期不断更新，想查看最新版本请移步至https://github.com/forrest23/react-native-interview1.React Native相对于原生的ios和Android有哪些优...
使用JavaScript构建原生移动应用：React Native入门
“Learning.React.Native.2015.12.pdf”是一本关于React Native的教程书籍，由Bonnie Eisenman编写，旨在帮助开发者利用JavaScript构建原生移动应用，覆盖了iOS和Android平台。该书基于Facebook的React库，但针对的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值