伴隨著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 的占用空間。
- 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)前組件相同
- 描述事件在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ù)洞慎。。嘿棘。