React备绽、React Native面試題

伴隨著MVVM框架和移動端跨平臺開發(fā)越來越火议泵,作為移動端的你準(zhǔn)備好了嗎占贫?

基礎(chǔ)部分(答案自行百度,簡答只做提示)

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

簡答:react native一套代碼可以開發(fā)出跨平臺app型奥,
減少了人力瞳收、節(jié)省了時間、避免了 iOS 與 Android 版本發(fā)布的時間差厢汹,開發(fā)新功能可以更迅速缎讼。等等

2.React Native的優(yōu)點和缺點在哪里?

簡答:缺點:內(nèi)存坑匠、轉(zhuǎn)化為原生的

3.父傳子,子傳父數(shù)據(jù)傳遞方式卧惜?

簡答:props state refs 方面回答

4.如何實現(xiàn)底部TabBar的高度不一樣呢厘灼?(類似新浪微博底部加號)

簡答:主要考察flex布局絕對定位問題

5.你的項目有沒有使用redux或者是mobx來管理數(shù)據(jù)呢?
6.請您簡單介紹一下redux咽瓷?dva? mobx设凹?

簡答:redux ==> action/reducer/store
           mobx ==>數(shù)據(jù)雙向綁定

7.當(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 的占用空間。
  1. React中Element 和 Component 有何區(qū)別鲫惶?
簡單地說蜈首,一個 React element 描述了你想在屏幕上看到什么。
換個說法就是剑按,一個 React element 是一些 UI 的對象表示疾就。
一個 React Component 是一個函數(shù)或一個類,
它可以接受輸入并返回一個 React element 
(通常是通過 JSX 艺蝴,它被轉(zhuǎn)化成一個 createElement 調(diào)用)猬腰。

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

其實這個問題也是跟reconciliation有關(guān)系。
“和解( reconciliation )的最終目標(biāo)是以最有效的方式猜敢,根據(jù)新的狀態(tài)更新用戶界面”姑荷。
如果我們知道我們的用戶界面(UI)的某一部分不會改變盒延,
那么沒有理由讓 React 很麻煩地試圖去弄清楚它是否應(yīng)該渲染。
通過從 shouldComponentUpdate 返回 false鼠冕,
React 將假定當(dāng)前組件及其所有子組件將保持與當(dāng)前組件相同
  1. 描述事件在React中的處理方式
為了解決跨瀏覽器兼容性問題添寺,
您的 React 中的事件處理程序?qū)鬟f SyntheticEvent 的實例,
它是 React 的瀏覽器本機事件的跨瀏覽器包裝器懈费。

這些 SyntheticEvent 與您習(xí)慣的原生事件具有相同的接口计露,除了它們在所有瀏覽器中都兼容。
有趣的是憎乙,React 實際上并沒有將事件附加到子節(jié)點本身票罐。
React 將使用單個事件監(jiān)聽器監(jiān)聽頂層的所有事件。
這對于性能是有好處的泞边,這也意味著在更新DOM時该押,React 不需要擔(dān)心跟蹤事件監(jiān)聽器

11.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é)點對象

12.面試中的一道題:

  constructor() {
    super();
    this.state = {
      val: 0
    };
  }
  
  componentDidMount() {
    this.setState({val: this.state.val + 1});
    console.log(this.state.val);    // 第 1 次 log

    this.setState({val: this.state.val + 1});
    console.log(this.state.val);    // 第 2 次 log

    setTimeout(() => {
      this.setState({val: this.state.val + 1});
      console.log(this.state.val);  // 第 3 次 log

      this.setState({val: this.state.val + 1});
      console.log(this.state.val);  // 第 4 次 log
    }, 0);
  }

  render() {
    return null;
  }
};
問上述代碼中 4 次 console.log 打印出來的 val 分別是多少袭厂?
答案:4 次 log 的值分別是:0拌消、0唐全、2启具、3。
 (如果想知道到底為什么应媚,可以看另一篇文章严沥,《React中this.setState到底做了什么?》)

13.XSS與CSRF介紹

XSS是一種跨站腳本攻擊中姜,是屬于代碼注入的一種消玄,攻擊者通過將代碼注入網(wǎng)頁中,其他用戶看到會受到影響(代碼內(nèi)容有請求外部服務(wù)器);

CSRF是一種跨站請求偽造丢胚,冒充用戶發(fā)起請求翩瓜,完成一些違背用戶請求的行為(刪帖,改密碼携龟,發(fā)郵件兔跌,發(fā)帖等)

14.在使用redux過程中,如何防止定義的action-type的常量重復(fù)峡蟋?

ES6引入了一種新的原始數(shù)據(jù)類型Symbol坟桅,表示獨一無二的值华望。
Symbol函數(shù)前不能使用new命令,否則會報錯仅乓。這是因為生成的Symbol是一個原始類型的值赖舟,不是對象
Symbol函數(shù)可以接受一個字符串作為參數(shù),表示對Symbol實例的描述夸楣,主要是為了在控制臺顯示宾抓,或者轉(zhuǎn)為字符串時,比較容易區(qū)分豫喧。

待續(xù)洞慎。。嘿棘。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市旭绒,隨后出現(xiàn)的幾起案子鸟妙,更是在濱河造成了極大的恐慌,老刑警劉巖挥吵,帶你破解...
    沈念sama閱讀 210,914評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件重父,死亡現(xiàn)場離奇詭異,居然都是意外死亡忽匈,警方通過查閱死者的電腦和手機房午,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 89,935評論 2 383
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來丹允,“玉大人郭厌,你說我怎么就攤上這事〉癖危” “怎么了折柠?”我有些...
    開封第一講書人閱讀 156,531評論 0 345
  • 文/不壞的土叔 我叫張陵,是天一觀的道長批狐。 經(jīng)常有香客問我扇售,道長,這世上最難降的妖魔是什么嚣艇? 我笑而不...
    開封第一講書人閱讀 56,309評論 1 282
  • 正文 為了忘掉前任承冰,我火速辦了婚禮,結(jié)果婚禮上食零,老公的妹妹穿的比我還像新娘困乒。我一直安慰自己,他們只是感情好贰谣,可當(dāng)我...
    茶點故事閱讀 65,381評論 5 384
  • 文/花漫 我一把揭開白布顶燕。 她就那樣靜靜地躺著凑保,像睡著了一般。 火紅的嫁衣襯著肌膚如雪涌攻。 梳的紋絲不亂的頭發(fā)上欧引,一...
    開封第一講書人閱讀 49,730評論 1 289
  • 那天,我揣著相機與錄音恳谎,去河邊找鬼芝此。 笑死,一個胖子當(dāng)著我的面吹牛因痛,可吹牛的內(nèi)容都是我干的婚苹。 我是一名探鬼主播,決...
    沈念sama閱讀 38,882評論 3 404
  • 文/蒼蘭香墨 我猛地睜開眼鸵膏,長吁一口氣:“原來是場噩夢啊……” “哼膊升!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起谭企,我...
    開封第一講書人閱讀 37,643評論 0 266
  • 序言:老撾萬榮一對情侶失蹤廓译,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后债查,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體非区,經(jīng)...
    沈念sama閱讀 44,095評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,448評論 2 325
  • 正文 我和宋清朗相戀三年盹廷,在試婚紗的時候發(fā)現(xiàn)自己被綠了征绸。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,566評論 1 339
  • 序言:一個原本活蹦亂跳的男人離奇死亡俄占,死狀恐怖管怠,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情缸榄,我是刑警寧澤排惨,帶...
    沈念sama閱讀 34,253評論 4 328
  • 正文 年R本政府宣布,位于F島的核電站碰凶,受9級特大地震影響暮芭,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜欲低,卻給世界環(huán)境...
    茶點故事閱讀 39,829評論 3 312
  • 文/蒙蒙 一辕宏、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧砾莱,春花似錦瑞筐、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,715評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽块蚌。三九已至,卻和暖如春膘格,著一層夾襖步出監(jiān)牢的瞬間峭范,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,945評論 1 264
  • 我被黑心中介騙來泰國打工瘪贱, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留纱控,地道東北人。 一個月前我還...
    沈念sama閱讀 46,248評論 2 360
  • 正文 我出身青樓菜秦,卻偏偏與公主長得像甜害,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子球昨,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,440評論 2 348

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

  • React Native優(yōu)秀博客尔店,以及優(yōu)秀的Github庫列表(很多英文資料源自于[awesome-react-n...
    董董董董董董董董董大笨蛋閱讀 10,594評論 4 162
  • 公司解散了。 最后一天去上班主慰,上午搞了個小型拍賣會嚣州,拍賣了公司的電腦手機顯示器,可惜我什么也沒拍到(((o(*?▽...
    埃_閱讀 213評論 0 3
  • 喜歡的都是小心翼翼的河哑! 任何大張旗鼓的聊天都只是在漫不經(jīng)心的逗樂罷了 而真正的喜歡是小心翼翼的.
    sss彥子阿閱讀 437評論 0 1