React Native面试知识点

本文原创首发于公众号:ReactNative开发圈,转载需注明出处。

本文会不定期不断更新,想查看最新版本请移步至https://github.com/forrest23/react-native-interview


1.React Native相对于原生的ios和Android有哪些优势?

1.性能媲美原生APP 2.使用JavaScript编码,只要学习这一种语言 3.绝大部分代码安卓和IOS都能共用 4.组件式开发,代码重用性很高 5.跟编写网页一般,修改代码后即可自动刷新,不需要慢慢编译,节省很多编译等待时间 6.支持APP热更新,更新无需重新安装APP

缺点: 内存占用相对较高 版本还不稳定,一直在更新,现在还没有推出稳定的1.0版本

2.React Native组件的生命周期

生命周期 调用次数 能否使用 setSate() getDefaultProps 1(全局调用一次) 否 getInitialState 1 否 componentWillMount 1 是 render >=1 否 componentDidMount 1 是 componentWillReceiveProps >=0 是 shouldComponentUpdate >=0 否 componentWillUpdate >=0 否 componentDidUpdate >=0 否 componentWillUnmount 1 否

3.当你调用setState的时候,发生了什么事?

当调用 setState 时,React会做的第一件事情是将传递给 setState 的对象合并到组件的当前状态。 这将启动一个称为和解(reconciliation)的过程。 和解(reconciliation)的最终目标是以最有效的方式,根据这个新的状态来更新UI。 为此,React将构建一个新的 React 元素树(您可以将其视为 UI 的对象表示)。 一旦有了这个树,为了弄清 UI 如何响应新的状态而改变,React 会将这个新树与上一个元素树相比较( diff )。 通过这样做, React 将会知道发生的确切变化,并且通过了解发生什么变化,只需在绝对必要的情况下进行更新即可最小化 UI 的占用空间。

4.props和state相同点和不同点

1.不管是props还是state的改变,都会引发render的重新渲染。 2.都能由自身组件的相应初始化函数设定初始值。

不同点 1.初始值来源:state的初始值来自于自身的getInitalState(constructor)函数;props来自于父组件或者自身getDefaultProps(若key相同前者可覆盖后者)。

2.修改方式:state只能在自身组件中setState,不能由父组件修改;props只能由父组件修改,不能在自身组件修改。

3.对子组件:props是一个父组件传递给子组件的数据流,这个数据流可以一直传递到子孙组件;state代表的是一个组件内部自身的状态,只能在自身组件中存在。

5.shouldComponentUpdate 应该做什么

其实这个问题也是跟reconciliation有关系。 “和解( reconciliation )的最终目标是以最有效的方式,根据新的状态更新用户界面”。 如果我们知道我们的用户界面(UI)的某一部分不会改变, 那么没有理由让 React 很麻烦地试图去弄清楚它是否应该渲染。 通过从 shouldComponentUpdate 返回 false, React 将假定当前组件及其所有子组件将保持与当前组件相同

6.reactJS的props.children.map函数来遍历会收到异常提示,为什么?应该如何遍历?

this.props.children 的值有三种可能: 1.当前组件没有子节点,它就是 undefined; 2.有一个子节点,数据类型是 object ; 3.有多个子节点,数据类型就是 array 。 系统提供React.Children.map()方法安全的遍历子节点对象

7.redux状态管理的流程

action是用户触发或程序触发的一个普通对象。 reducer是根据action操作来做出不同的数据响应,返回一个新的state。 store的最终值就是由reducer的值来确定的。(一个store是一个对象, reducer会改变store中的某些值) action -> reducer -> 新store -> 反馈到UI上有所改变。

8.加载bundle的机制

要实现RN的脚本热更新,我们要搞明白RN是如何去加载脚本的。 在编写业务逻辑的时候,我们会有许多个js文件,打包的时候RN会将这些个js文件打包成一个叫index.android.bundle(ios的是index.ios.bundle)的文件,所有的js代码(包括rn源代码、第三方库、业务逻辑的代码)都在这一个文件里,启动App时会第一时间加载bundle文件,所以脚本热更新要做的事情就是替换掉这个bundle文件。

9.Flex布局

采用Flex布局的元素,称为Flex容器(flex Container),简称"容器"。它的所有子元素自动成为容器成员,称为Flex项目(flex item),简称"项目"。

容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。

容器的属性 以下6个属性设置在容器上。 flex-direction 属性决定主轴的方向(即项目的排列方向)。 flex-wrap 属性定义,如果一条轴线排不下,如何换行。 flex-flow flex-flow属性是flex-direction属性和flex-wrap属性的简写形式。 justify-content 定义了项目在主轴上的对齐方式。 align-items 属性定义项目在交叉轴上如何对齐。 align-content align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。

10.请简述 code push 的原理

code push 调用 react native 的打包命令,将当前环境的非 native 代码全量打包成一个 bundle 文件,然后上传到微软云服务器(Windows Azure)。 在 app 中启动页(或 splash 页)编写请求更新的代码(请求包含了本地版本,hashCode、appToken 等信息),微软服务端对比本地 js bundle 版本和微软服务器的版本,如果本地版本低,就下载新的 js bundle 下来后实现更新(code push 框架实现)。

11.Redux中同步 action 与异步 action 最大的区别是什么

同步只返回一个普通 action 对象。而异步操作中途会返回一个 promise 函数。当然在 promise 函数处理完毕后也会返回一个普通 action 对象。thunk 中间件就是判断如果返回的是函数,则不传导给 reducer,直到检测到是普通 action 对象,才交由 reducer 处理。


本文会不定期不断更新,想查看最新版本请移步至https://github.com/forrest23/react-native-interview

本文题目节选自互联网,如有侵权请联系我!

欢迎关注我的微信公众号:ReactNative开发圈

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/366824.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

KIE-WB / JBPM控制台Ng –配置

大家好,这是我上一篇文章中有关如何使用jBPM Console的后续文章 。 这篇文章的主要思想是描述为了在您自己的公司中使用它,您需要对jBPM Console NG进行一些最常见的配置。 但是在讨论技术细节之前,我们将介绍KIE Workbench(KIE-W…

EasyUI常用控件禁用方法

来自&#xff1a;http://blog.csdn.net/jin_guang/article/details/36905387 特此感谢 1.validatebox可以用的用法:前两种适用于单个的validatebox; 第三种应用于整个form里面的输入框; <1>.$("#id").attr("readonly", true); ----- $("#id…

linux内核percpu变量声明,Linux kernel percpu变量解析

Linux 2.6 kernel 中的 percpu 变量是经常用到的东西&#xff0c;因为现在很多计算机都已经支持多处理器了&#xff0c;而且 kernel 默认都会被编译成 SMP 的&#xff0c;相对于原来多个处理器共享数据并进行处理的方式&#xff0c;用 percpu 变量在 SMP、NUMA 等架构下可以提高…

django组件 分页器

1 from django.shortcuts import render,HttpResponse2 3 # Create your views here.4 from app01.models import *5 from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger6 7 def index(request):8 9 10 批量导入数据: 11 12 Booklist[] …

自己写一个H5项目CI系统

持续集成&#xff08;Continuous integration&#xff0c;简称CI)系统在软件自动化构建&#xff08;包括编译、发布、自动化测试&#xff09;方面有着重要的作用&#xff0c;在之前&#xff0c;前端项目简单&#xff0c;很多时候发布都只是一些简单的拷贝&#xff0c;而随着web…

25.QT-模型视图

模型视图设计模式的核心思想 使模型(数据)与视图(显示)相分离模型只需要对外提供标准接口存取数据,无需数据如何显示视图只需要自定义数据的显示方式,无需数据如何组织存储当数据发生改变时,会通过信号通知视图当用户与视图进行交互时,会通过信号向模型发送交互信息 在QT中提供…

休眠事实:多级访存

在多个级别上检索根实体及其子关联是很常见的。 在我们的示例中&#xff0c;我们需要加载一个包含其树&#xff0c;分支和叶子的森林&#xff0c;并且我们将尝试查看Hibernate对于三种集合类型的行为&#xff1a;集合&#xff0c;索引列表和包。 这是我们的类层次结构的样子&…

linux系统fuser命令,Linux系统使用Fuser命令的方法

fuser命令是一个非常聪明的unix实用程序&#xff0c;用于查找正在使用某个文件、目录或socket的进程。 它还提供有关拥有该进程的用户和访问类型的信息。。fuser工具显示了使用指定文件或文件系统的每个进程的进程ID(PID)。安装如果你的精简版运行fuser提示如下信息&#xff1a…

网络基础之 Nmap 命令

nmap......转载于:https://www.cnblogs.com/changha0/p/9898020.html

react-router 源码浅析

用 react-router 也用了比较久了&#xff0c;对他的内部工作方式却只是了解皮毛&#xff0c;而且大部分还是通过别人的博客。最近两周打算自己探究一下他的实现。 注意&#xff01;因为我只使用过 v3 版本的 react-router&#xff0c;因为对他的使用方式比较熟悉&#xff0c;所…

前5个有用的隐藏Eclipse功能

Eclipse是野兽。 仅凭其力量才能超越其神秘感的设备。 有人将其称为连续体跨功能器 。 其他人则称它为透湿器 。 是的&#xff0c;它是如此之大&#xff0c;需要花费数年才能掌握。 然后&#xff0c;您的经理出现并告诉您&#xff1a;我们正在使用NetBeans。 开玩笑。 除了Ada…

linux如何解除密码,如何在Linux下解除PDF文件的密码?

【51CTO.com快译】今天&#xff0c;我碰巧与一位朋友共享一个受密码保护的PDF文件。我知道该PDF文件的密码&#xff0c;但不想透露。相反&#xff0c;我只想解除密码&#xff0c;将文件发送给朋友。于是我开始在网上找一些简单的方法&#xff0c;好解除PDF文件的密码保护。上网…

C#中结构体定义并转换字节数组

ref: https://www.cnblogs.com/dafanjoy/p/7818126.html C#中结构体定义并转换字节数组 最近的项目在做socket通信报文解析的时候&#xff0c;用到了结构体与字节数组的转换&#xff1b;由于客户端采用C开发&#xff0c;服务端采用C#开发&#xff0c;所以双方必须保证各自定义结…

解析robots.txt

案例&#xff1a; http://www.taobao.com/robots.txt 学习&#xff1a; User-agent: * 这里的*代表的所有的搜索引擎种类&#xff0c;*是一个通配符Disallow: /admin/ 这里定义是禁止爬寻admin目录下面的目录Disallow: /require/ 这里定义是禁止爬寻require目录下面的目录Disal…

2018移动端页面适配-自适应最新方案直接写px--------通过gulp工作流搭建一体化的移动端开发环境

1.开始 在flexible的GitHub上面写着 由于viewport单位得到众多浏览器的兼容&#xff0c;lib-flexible这个过渡方案已经可以放弃使用&#xff0c;不管是现在的版本还是以前的版本&#xff0c;都存有一定的问题。建议大家开始使用viewport来替代此方案。vw的兼容方案可以参阅《如…

jclouds的命令行界面

序幕 我使用和为jclouds贡献了一年多的时间。 到目前为止&#xff0c;我已经在很多领域广泛使用了它&#xff0c;尤其是在Fuse生态系统中 。 它的强大之处在于它缺少一件事&#xff0c;该工具可用于管理jclouds也提供访问权限的任何云提供商。 类似于EC2命令之类的工具&#xf…

中兴linux下载软件,国产操作系统中兴新支点使用WPS For Linux办公软件的体验报告...

以下将给你带来在国产操作系统中兴新支点操作系统下使用WPS For Linux办公软件的体验报告&#xff0c;WPS For Linux提供Deb、Rpm、Tar.xz、Snap软件包&#xff0c;你可以选择Tar.xz源码包编译安装&#xff0c;或在系统自带的软件中心下安装&#xff0c;也可以参考采用snap方式…

Java 教程(开发环境配置+基础语法)

Java 开发环境配置 在本章节中我们将为大家介绍如何搭建Java开发环境。 window系统安装java 下载JDK 首先我们需要下载java开发工具包JDK&#xff0c;下载地址&#xff1a;http://www.oracle.com/technetwork/java/javase/downloads/index.html&#xff0c;点击如下下载按钮&am…

数据采集工具Telegraf:简介及安装

接着上一篇博客&#xff1a;InfluxDB简介及安装&#xff0c;这篇博客介绍下Linux环境下Telegraf安装以及其功能特点。。。 官网地址&#xff1a;influxdata 官方文档&#xff1a;telegraf文档 环境&#xff1a;CentOS7.4 64位 Telegraf版本&#xff1a;0.11.1-1 一、Telegraf介…

初探小程序插件

插播公司招聘信息&#xff1a; https://cnodejs.org/topic/5a915706653c43b914684f90 小程序插件可以干嘛&#xff1f; 周二晚上&#xff08;3.13&#xff09;的一个小程序新功能发布了-【小程序插件】&#xff0c;一开始以为是小程序发布了类似npm的组件管理工具&#xff0c;…