ReactNative面试

reactnative.png

part 2

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

1.性能媲美原生APP2.使用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 处理。

part 1

1.props和state的区别?

现在我们来总结下,props与state的区别:

  • props是指组件间传递的一种方式,props自然也可以传递state。由于React的数据流是自上而下的,所以是从父组件向子组件进行传递;另外组件内部的this.props属性是只读的不可修改!
  • state是组件内部的状态(数据),不能够直接修改,必须要通过setState来改变值的状态,从而达到更新组件内部数据的作用。
    props和state是经常要结合使用的,父组件的state可以转化为props来为子组件进行传值。在这种情况下,子组件接收的props是只读的,想要改变值,只能通过父组件的state对其进行更改。

props 和 state的区别 http://www.cnblogs.com/ysbpysbp/p/6115900.html

2.知道react-native的生命周期么?


15523592184747.jpg

//www.greatytc.com/p/ea61a014ce4e
//www.greatytc.com/p/379aecebb1dc

3.react-native父组件和子组件直接如何交互?

父控件调用子控件中的方法
在父控件中给子控件设置ref="ref1",然后设置button点击事件。在button点击事件中通过this.refs.ref1.buttonClick()来调用子控件中的方法
子控件调用父控件中的方法
在父控件中嵌套子控件的时候,给子控件添加事件属性,eg:
在父控件中给子控件添加了onPress={()=>this.btnClick()} 和onClick={()=>this.btn2Click()}事件
然后在子控件中通过this.props.onPress();调用父控件的()=>this.btnClick()方法。通过this.props.onClick();调用父控件的()=>this.btn2Click()方法

4.react-native父组件和兄弟组件之间如何交互?

Event Emitter/Target/Dispatcher :需要从EventEmitter/EventTarget/EventDispatcher继承或者实现合适的接口

Signals:与Event Emitter/Target/Dispatcher 相比,不需要指定事件的“名称”,可以避免硬编码带来的问题

Publish / Subscribe : 类似于很多语言中的事件总线EventBus广播的方式,相比EventEmitter,优点是组件之间可以完全独立,没有任何关联。React中比较常用的是库是PubSubJS,关于这个库的详细使用请查看官方的说明

[React Native]组件之间通信 //www.greatytc.com/p/9b0d5a3d0518

5.如果给setState传入第二个参数,那这第二个参数有什么作用?是干什么的?

一个回调函数,当setState结束并重新呈现该组件时将被调用。

一些没有说出来的东西是setState是异步的,这就是为什么它需要一个第二个回调函数。通常情况下,最好使用另一种生命周期方法,而不是依赖这个回调函数,但是很高兴知道它存在。

this.setState( { username: 'tylermcginnis33' }, () => console.log('setState has finished and the component has re-rendered.') )

6.rn怎么跟原生进行交互?

JS调用原生
在调用原生时,我们需要实现RCTBridgeModule和RCT_EXPORT_MODULE();
RCT_EXPORT_MODULE();则是一个宏定义,返回moduleName,并且调用+ load方法注册

老版本的调用方式为,但是接口被标记为deprecated:__deprecated_msg("Subclass RCTEventEmitter instead");
[self.bridge.eventDispatcher sendAppEventWithName:kGiftReloadData body:nil];
新版本的调用方式为
ZanEventEmitter *emitter = [[ZanEventEmitter alloc] init]; emitter.bridge = self.bridge; [emitter sendEventWithName:kGiftReloadData body:nil];
//www.greatytc.com/p/ea61a014ce4e

7.用过fetch么?那你知道fetch和ajax的区别么?

简单来说 Ajax的本质是使用XMLHttpRequest对象来请求数据;而fetch是用于发送请求的API。

具体的看这篇文章(http://www.cnblogs.com/September-9/p/7099975.html),因为ajax我没用过,对他不是很了解。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 196,763评论 5 462
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 82,728评论 2 374
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 143,834评论 0 325
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,707评论 1 267
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,576评论 5 358
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,429评论 1 275
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,826评论 3 388
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,474评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,762评论 1 293
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,792评论 2 314
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,582评论 1 328
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,424评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,845评论 3 300
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,059评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,361评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,826评论 2 343
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,038评论 2 338

推荐阅读更多精彩内容