ReactNative面試

reactnative.png

part 2

1.React Native相對于原生的ios和Android有哪些優(yōu)勢蚁袭?

1.性能媲美原生APP2.使用JavaScript編碼,只要學(xué)習(xí)這一種語言3.絕大部分代碼安卓和IOS都能共用4.組件式開發(fā)揩悄,代碼重用性很高5.跟編寫網(wǎng)頁一般,修改代碼后即可自動刷新亏娜,不需要慢慢編譯蹬挺,節(jié)省很多編譯等待時間6.支持APP熱更新,更新無需重新安裝APP

缺點:內(nèi)存占用相對較高版本還不穩(wěn)定溯泣,一直在更新榕茧,現(xiàn)在還沒有推出穩(wěn)定的1.0版本

2.React Native組件的生命周期

生命周期 調(diào)用次數(shù) 能否使用 setSate()getDefaultProps 1(全局調(diào)用一次) 否getInitialState 1 否componentWillMount 1 是render >=1 否componentDidMount 1 是componentWillReceiveProps >=0 是shouldComponentUpdate >=0 否componentWillUpdate >=0 否componentDidUpdate >=0 否componentWillUnmount 1 否

3.當(dāng)你調(diào)用setState的時候,發(fā)生了什么事肢簿?

當(dāng)調(diào)用 setState 時蜻拨,React會做的第一件事情是將傳遞給 setState 的對象合并到組件的當(dāng)前狀態(tài)。這將啟動一個稱為和解(reconciliation)的過程缎讼。和解(reconciliation)的最終目標(biāo)是以最有效的方式休涤,根據(jù)這個新的狀態(tài)來更新UI笛辟。為此,React將構(gòu)建一個新的 React 元素樹(您可以將其視為 UI 的對象表示)欠肾。一旦有了這個樹围来,為了弄清 UI 如何響應(yīng)新的狀態(tài)而改變匈睁,React 會將這個新樹與上一個元素樹相比較( diff )。通過這樣做航唆, React 將會知道發(fā)生的確切變化糯钙,并且通過了解發(fā)生什么變化,只需在絕對必要的情況下進行更新即可最小化 UI 的占用空間任岸。

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

1.不管是props還是state的改變,都會引發(fā)render的重新渲染困鸥。2.都能由自身組件的相應(yīng)初始化函數(shù)設(shè)定初始值剑按。

不同點1.初始值來源:state的初始值來自于自身的getInitalState(constructor)函數(shù);props來自于父組件或者自身getDefaultProps(若key相同前者可覆蓋后者)虐译。

2.修改方式:state只能在自身組件中setState吴趴,不能由父組件修改;props只能由父組件修改厢拭,不能在自身組件修改撇叁。

3.對子組件:props是一個父組件傳遞給子組件的數(shù)據(jù)流,這個數(shù)據(jù)流可以一直傳遞到子孫組件楞捂;state代表的是一個組件內(nèi)部自身的狀態(tài),只能在自身組件中存在胶坠。

5.shouldComponentUpdate 應(yīng)該做什么

其實這個問題也是跟reconciliation有關(guān)系繁堡。“和解( reconciliation )的最終目標(biāo)是以最有效的方式闻牡,根據(jù)新的狀態(tài)更新用戶界面”绳矩。如果我們知道我們的用戶界面(UI)的某一部分不會改變,那么沒有理由讓 React 很麻煩地試圖去弄清楚它是否應(yīng)該渲染埋酬。通過從 shouldComponentUpdate 返回 false写妥,React 將假定當(dāng)前組件及其所有子組件將保持與當(dāng)前組件相同

6.reactJS的props.children.map函數(shù)來遍歷會收到異常提示审姓,為什么?應(yīng)該如何遍歷扎筒?

this.props.children 的值有三種可能:1.當(dāng)前組件沒有子節(jié)點酬姆,它就是 undefined;2.有一個子節(jié)點,數(shù)據(jù)類型是 object 骨宠;3.有多個子節(jié)點相满,數(shù)據(jù)類型就是 array 。系統(tǒng)提供React.Children.map()方法安全的遍歷子節(jié)點對象

7.redux狀態(tài)管理的流程

action是用戶觸發(fā)或程序觸發(fā)的一個普通對象立美。reducer是根據(jù)action操作來做出不同的數(shù)據(jù)響應(yīng),返回一個新的state建蹄。store的最終值就是由reducer的值來確定的。(一個store是一個對象, reducer會改變store中的某些值)action -> reducer -> 新store -> 反饋到UI上有所改變痛单。

8.加載bundle的機制

要實現(xiàn)RN的腳本熱更新,我們要搞明白RN是如何去加載腳本的蔫巩。 在編寫業(yè)務(wù)邏輯的時候快压,我們會有許多個js文件,打包的時候RN會將這些個js文件打包成一個叫index.android.bundle(ios的是index.ios.bundle)的文件坪郭,所有的js代碼(包括rn源代碼脉幢、第三方庫、業(yè)務(wù)邏輯的代碼)都在這一個文件里沪曙,啟動App時會第一時間加載bundle文件萎羔,所以腳本熱更新要做的事情就是替換掉這個bundle文件。

9.Flex布局

采用Flex布局的元素缘眶,稱為Flex容器(flex Container)髓废,簡稱"容器"。它的所有子元素自動成為容器成員顶燕,稱為Flex項目(flex item)蒋譬,簡稱"項目"。

容器默認存在兩根軸:水平的主軸(main axis)和垂直的交叉軸(cross axis)癣漆。主軸的開始位置(與邊框的交叉點)叫做main start剂买,結(jié)束位置叫做main end癌蓖;交叉軸的開始位置叫做cross start婚肆,結(jié)束位置叫做cross end较性。

項目默認沿主軸排列。單個項目占據(jù)的主軸空間叫做main size赞咙,占據(jù)的交叉軸空間叫做cross size。

容器的屬性以下6個屬性設(shè)置在容器上院仿。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 調(diào)用 react native 的打包命令匈子,將當(dāng)前環(huán)境的非 native 代碼全量打包成一個 bundle 文件,然后上傳到微軟云服務(wù)器(Windows Azure)游岳。 在 app 中啟動頁(或 splash 頁)編寫請求更新的代碼(請求包含了本地版本,hashCode喷户、appToken 等信息)访锻,微軟服務(wù)端對比本地 js bundle 版本和微軟服務(wù)器的版本,如果本地版本低河哑,就下載新的 js bundle 下來后實現(xiàn)更新(code push 框架實現(xiàn))哭懈。

11.Redux中同步 action 與異步 action 最大的區(qū)別是什么

同步只返回一個普通 action 對象。而異步操作中途會返回一個 promise 函數(shù)睬罗。當(dāng)然在 promise 函數(shù)處理完畢后也會返回一個普通 action 對象旭斥。thunk 中間件就是判斷如果返回的是函數(shù),則不傳導(dǎo)給 reducer花盐,直到檢測到是普通 action 對象菇爪,才交由 reducer 處理。

part 1

1.props和state的區(qū)別熙揍?

現(xiàn)在我們來總結(jié)下,props與state的區(qū)別:

  • props是指組件間傳遞的一種方式氏涩,props自然也可以傳遞state是尖。由于React的數(shù)據(jù)流是自上而下的,所以是從父組件向子組件進行傳遞饺汹;另外組件內(nèi)部的this.props屬性是只讀的不可修改!
  • state是組件內(nèi)部的狀態(tài)(數(shù)據(jù))作郭,不能夠直接修改,必須要通過setState來改變值的狀態(tài)蜘醋,從而達到更新組件內(nèi)部數(shù)據(jù)的作用咏尝。
    props和state是經(jīng)常要結(jié)合使用的编检,父組件的state可以轉(zhuǎn)化為props來為子組件進行傳值。在這種情況下厕怜,子組件接收的props是只讀的蕾总,想要改變值,只能通過父組件的state對其進行更改递雀。

props 和 state的區(qū)別 http://www.cnblogs.com/ysbpysbp/p/6115900.html

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


15523592184747.jpg

http://www.reibang.com/p/ea61a014ce4e
http://www.reibang.com/p/379aecebb1dc

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

父控件調(diào)用子控件中的方法
在父控件中給子控件設(shè)置ref="ref1",然后設(shè)置button點擊事件。在button點擊事件中通過this.refs.ref1.buttonClick()來調(diào)用子控件中的方法
子控件調(diào)用父控件中的方法
在父控件中嵌套子控件的時候蠢甲,給子控件添加事件屬性据忘,eg:
在父控件中給子控件添加了onPress={()=>this.btnClick()} 和onClick={()=>this.btn2Click()}事件
然后在子控件中通過this.props.onPress();調(diào)用父控件的()=>this.btnClick()方法搞糕。通過this.props.onClick();調(diào)用父控件的()=>this.btn2Click()方法

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

Event Emitter/Target/Dispatcher :需要從EventEmitter/EventTarget/EventDispatcher繼承或者實現(xiàn)合適的接口

Signals:與Event Emitter/Target/Dispatcher 相比窍仰,不需要指定事件的“名稱”,可以避免硬編碼帶來的問題

Publish / Subscribe : 類似于很多語言中的事件總線EventBus廣播的方式,相比EventEmitter晶伦,優(yōu)點是組件之間可以完全獨立啄枕,沒有任何關(guān)聯(lián)频祝。React中比較常用的是庫是PubSubJS,關(guān)于這個庫的詳細使用請查看官方的說明

[React Native]組件之間通信 http://www.reibang.com/p/9b0d5a3d0518

5.如果給setState傳入第二個參數(shù)沽一,那這第二個參數(shù)有什么作用漓糙?是干什么的?

一個回調(diào)函數(shù)蝗蛙,當(dāng)setState結(jié)束并重新呈現(xiàn)該組件時將被調(diào)用为狸。

一些沒有說出來的東西是setState是異步的,這就是為什么它需要一個第二個回調(diào)函數(shù)病曾。通常情況下漾根,最好使用另一種生命周期方法,而不是依賴這個回調(diào)函數(shù)逼蒙,但是很高興知道它存在寄疏。

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

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

JS調(diào)用原生
在調(diào)用原生時驳棱,我們需要實現(xiàn)RCTBridgeModule和RCT_EXPORT_MODULE();
RCT_EXPORT_MODULE();則是一個宏定義农曲,返回moduleName,并且調(diào)用+ load方法注冊

老版本的調(diào)用方式為形葬,但是接口被標(biāo)記為deprecated:__deprecated_msg("Subclass RCTEventEmitter instead");
[self.bridge.eventDispatcher sendAppEventWithName:kGiftReloadData body:nil];
新版本的調(diào)用方式為
ZanEventEmitter *emitter = [[ZanEventEmitter alloc] init]; emitter.bridge = self.bridge; [emitter sendEventWithName:kGiftReloadData body:nil];
http://www.reibang.com/p/ea61a014ce4e

7.用過fetch么?那你知道fetch和ajax的區(qū)別么笙以?

簡單來說 Ajax的本質(zhì)是使用XMLHttpRequest對象來請求數(shù)據(jù);而fetch是用于發(fā)送請求的API翩伪。

具體的看這篇文章(http://www.cnblogs.com/September-9/p/7099975.html)谈息,因為ajax我沒用過,對他不是很了解轻姿。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末互亮,一起剝皮案震驚了整個濱河市余素,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌威根,老刑警劉巖视乐,帶你破解...
    沈念sama閱讀 206,378評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件佑淀,死亡現(xiàn)場離奇詭異,居然都是意外死亡谎砾,警方通過查閱死者的電腦和手機捧颅,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,356評論 2 382
  • 文/潘曉璐 我一進店門隘道,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人谭梗,你說我怎么就攤上這事激捏。” “怎么了远舅?”我有些...
    開封第一講書人閱讀 152,702評論 0 342
  • 文/不壞的土叔 我叫張陵图柏,是天一觀的道長。 經(jīng)常有香客問我例诀,道長裁着,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 55,259評論 1 279
  • 正文 為了忘掉前任,我火速辦了婚禮桶雀,結(jié)果婚禮上背犯,老公的妹妹穿的比我還像新娘。我一直安慰自己漠魏,他們只是感情好柱锹,可當(dāng)我...
    茶點故事閱讀 64,263評論 5 371
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著壤巷,像睡著了一般瞧毙。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上矩动,一...
    開封第一講書人閱讀 49,036評論 1 285
  • 那天悲没,我揣著相機與錄音,去河邊找鬼甜橱。 笑死栈戳,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的譬胎。 我是一名探鬼主播命锄,決...
    沈念sama閱讀 38,349評論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼脐恩,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了苟翻?” 一聲冷哼從身側(cè)響起骗污,我...
    開封第一講書人閱讀 36,979評論 0 259
  • 序言:老撾萬榮一對情侶失蹤需忿,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后涕烧,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體汗洒,經(jīng)...
    沈念sama閱讀 43,469評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 35,938評論 2 323
  • 正文 我和宋清朗相戀三年憨攒,在試婚紗的時候發(fā)現(xiàn)自己被綠了鲫构。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,059評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖炕吸,靈堂內(nèi)的尸體忽然破棺而出勉痴,到底是詐尸還是另有隱情,我是刑警寧澤瀑罗,帶...
    沈念sama閱讀 33,703評論 4 323
  • 正文 年R本政府宣布斩祭,位于F島的核電站乡话,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏绑青。R本人自食惡果不足惜闸婴,卻給世界環(huán)境...
    茶點故事閱讀 39,257評論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望降狠。 院中可真熱鬧溺欧,春花似錦、人聲如沸芥牌。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,262評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽弃理。三九已至痘昌,卻和暖如春钥勋,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背辆苔。 一陣腳步聲響...
    開封第一講書人閱讀 31,485評論 1 262
  • 我被黑心中介騙來泰國打工算灸, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人驻啤。 一個月前我還...
    沈念sama閱讀 45,501評論 2 354
  • 正文 我出身青樓菲驴,卻偏偏與公主長得像,于是被迫代替她去往敵國和親骑冗。 傳聞我的和親對象是個殘疾皇子赊瞬,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 42,792評論 2 345

推薦閱讀更多精彩內(nèi)容