伴隨著MVVM框架和移動(dòng)端跨平臺(tái)開發(fā)越來越火,作為移動(dòng)端的你準(zhǔn)備好了嗎?
基礎(chǔ)部分(答案自行百度,簡答只做提示)
1.React Native相對(duì)于原生的ios和Android有哪些優(yōu)勢?
簡答:react native一套代碼可以開發(fā)出跨平臺(tái)app,
減少了人力、節(jié)省了時(shí)間、避免了 iOS 與 Android 版本發(fā)布的時(shí)間差,開發(fā)新功能可以更迅速。等等
2.React Native的優(yōu)點(diǎn)和缺點(diǎn)在哪里?
簡答:缺點(diǎn):內(nèi)存、轉(zhuǎn)化為原生的
3.父傳子,子傳父數(shù)據(jù)傳遞方式?
簡答:props state refs 方面回答
4.如何實(shí)現(xiàn)底部TabBar的高度不一樣呢?(類似新浪微博底部加號(hào))
簡答:主要考察flex布局絕對(duì)定位問題
5.你的項(xiàng)目有沒有使用redux或者是mobx來管理數(shù)據(jù)呢?
6.請您簡單介紹一下redux?dva? mobx?
簡答:redux ==> action/reducer/store
mobx ==>數(shù)據(jù)雙向綁定
7.當(dāng)你調(diào)用setState的時(shí)候,發(fā)生了什么事?
當(dāng)調(diào)用 setState 時(shí),React會(huì)做的第一件事情是將傳遞給 setState 的對(duì)象合并到組件的當(dāng)前狀態(tài)。
這將啟動(dòng)一個(gè)稱為和解(reconciliation)的過程。
和解(reconciliation)的最終目標(biāo)是以最有效的方式,根據(jù)這個(gè)新的狀態(tài)來更新UI。
為此,React將構(gòu)建一個(gè)新的 React 元素樹(您可以將其視為 UI 的對(duì)象表示)。
一旦有了這個(gè)樹,為了弄清 UI 如何響應(yīng)新的狀態(tài)而改變,React 會(huì)將這個(gè)新樹與上一個(gè)元素樹相比較( diff )。
通過這樣做, React 將會(huì)知道發(fā)生的確切變化,并且通過了解發(fā)生什么變化,只需在絕對(duì)必要的情況下進(jìn)行更新即可最小化 UI 的占用空間。
- React中Element 和 Component 有何區(qū)別?
簡單地說,一個(gè) React element 描述了你想在屏幕上看到什么。
換個(gè)說法就是,一個(gè) React element 是一些 UI 的對(duì)象表示。
一個(gè) React Component 是一個(gè)函數(shù)或一個(gè)類,
它可以接受輸入并返回一個(gè) React element
(通常是通過 JSX ,它被轉(zhuǎn)化成一個(gè) createElement 調(diào)用)。
9.shouldComponentUpdate 應(yīng)該做什么
其實(shí)這個(gè)問題也是跟reconciliation有關(guān)系。
“和解( reconciliation )的最終目標(biāo)是以最有效的方式,根據(jù)新的狀態(tài)更新用戶界面”。
如果我們知道我們的用戶界面(UI)的某一部分不會(huì)改變,
那么沒有理由讓 React 很麻煩地試圖去弄清楚它是否應(yīng)該渲染。
通過從 shouldComponentUpdate 返回 false,
React 將假定當(dāng)前組件及其所有子組件將保持與當(dāng)前組件相同
- 描述事件在React中的處理方式
為了解決跨瀏覽器兼容性問題,
您的 React 中的事件處理程序?qū)鬟f SyntheticEvent 的實(shí)例,
它是 React 的瀏覽器本機(jī)事件的跨瀏覽器包裝器。
這些 SyntheticEvent 與您習(xí)慣的原生事件具有相同的接口,除了它們在所有瀏覽器中都兼容。
有趣的是,React 實(shí)際上并沒有將事件附加到子節(jié)點(diǎn)本身。
React 將使用單個(gè)事件監(jiān)聽器監(jiān)聽頂層的所有事件。
這對(duì)于性能是有好處的,這也意味著在更新DOM時(shí),React 不需要擔(dān)心跟蹤事件監(jiān)聽器
11.reactJS的props.children.map函數(shù)來遍歷會(huì)收到異常提示,為什么?應(yīng)該如何遍歷?
this.props.children 的值有三種可能:
1.當(dāng)前組件沒有子節(jié)點(diǎn),它就是 undefined;
2.有一個(gè)子節(jié)點(diǎn),數(shù)據(jù)類型是 object ;
3.有多個(gè)子節(jié)點(diǎn),數(shù)據(jù)類型就是 array 。
系統(tǒng)提供React.Children.map()方法安全的遍歷子節(jié)點(diǎn)對(duì)象
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)頁中,其他用戶看到會(huì)受到影響(代碼內(nèi)容有請求外部服務(wù)器);
CSRF是一種跨站請求偽造,冒充用戶發(fā)起請求,完成一些違背用戶請求的行為(刪帖,改密碼,發(fā)郵件,發(fā)帖等)
14.在使用redux過程中,如何防止定義的action-type的常量重復(fù)?
ES6引入了一種新的原始數(shù)據(jù)類型Symbol,表示獨(dú)一無二的值。
Symbol函數(shù)前不能使用new命令,否則會(huì)報(bào)錯(cuò)。這是因?yàn)樯傻腟ymbol是一個(gè)原始類型的值,不是對(duì)象
Symbol函數(shù)可以接受一個(gè)字符串作為參數(shù),表示對(duì)Symbol實(shí)例的描述,主要是為了在控制臺(tái)顯示,或者轉(zhuǎn)為字符串時(shí),比較容易區(qū)分。
待續(xù)。。。