React 中 keys 的作用是什么增拥？
用于追蹤哪些列表中元素被修改啄巧，添加，移除的輔助標(biāo)識(shí)掌栅，減少不必要的渲染
調(diào)用 setState 之后發(fā)生了什么秩仆？
- react 將傳入的參數(shù)與組件當(dāng)前的狀態(tài)合并調(diào)和
- 根據(jù)新的狀態(tài)構(gòu)建react元素?cái)?shù)并且重新渲染UI界面
- 在react得到元素樹后會(huì)自動(dòng)計(jì)算與之前的差異然后根據(jù)差異最小化重新渲染
react生命周期
- 初始化階段
getDefaultProp：獲取實(shí)例默認(rèn)屬性
getInitialState：獲取每個(gè)實(shí)例的初始化狀態(tài)
componentWillMount: 組件即將被裝載渲染到頁(yè)面上
render:生成虛擬DOM節(jié)點(diǎn)
componentDidMount:組件真正被裝載 - 運(yùn)行中
componentWillReceiveProps:組件將要收到屬性時(shí)調(diào)用
shouldComponentUpdate: 組件在接受新的狀態(tài)或新屬性時(shí)調(diào)用可以return false 阻止render更新
componentWillUpdate:組件即將跟新不能修改屬性和狀態(tài)
render:組件重繪 - 銷毀階段
componentWillUnmount:組件即將被銷毀
為什么虛擬DOM可以提高性能
虛擬DOM其實(shí)是在js和DOM之間加了一層緩存，利用dom diff算法避免沒必要的dom操作猾封，可以只更新變化的那部分視圖
react diff算法原理
- 把樹形結(jié)構(gòu)按層級(jí)分解澄耍，只比較同級(jí)元素
- 給列表結(jié)構(gòu)的每個(gè)單元添加唯一的key，方便比較
- react只會(huì)匹配相同class的組件
- 合并操作晌缘，調(diào)用setstate齐莲，react重新渲染對(duì)應(yīng)部分視圖
react構(gòu)建組件的方式
- react.createClass()
- es6 class
- 無(wú)狀態(tài)函數(shù)
react工作原理
react 會(huì)創(chuàng)建虛擬DOM當(dāng)組件中狀態(tài)發(fā)生改變的時(shí)候會(huì)通過reacr diff算法標(biāo)記虛擬DOM中的變化，調(diào)節(jié)更新DOM
React 中 Element 與 Component 的區(qū)別
element:所見內(nèi)容的數(shù)據(jù)結(jié)構(gòu)磷箕，對(duì)UI的描述铅搓，是通過jsx構(gòu)建的聲明式代碼片段
component: 接收參數(shù)輸入返回某個(gè)react element的函數(shù)或者類
類組件(Class component)和函數(shù)式組件(Functional component)
Class component:可以使用額外的功能，例如生命周期搀捷，組件自身狀態(tài)
Functional component： 僅僅是接受props星掰，并渲染到頁(yè)面也成為無(wú)狀態(tài)組件
react事件處理邏輯
為解決瀏覽器兼容性問題，react將瀏覽器原生事件都封裝成合成事件嫩舟，傳入設(shè)置的事件中氢烘，組合事件提供了和原生事件相同的接口不僅屏蔽了底層瀏覽器的差異性還保證了行為的一致性，react以單一事件監(jiān)聽的方式將所有的事件都發(fā)送到頂層做處理家厌，這樣React 在更新 DOM 的時(shí)候就不需要考慮如何去處理附著在 DOM 上的事件監(jiān)聽器播玖，最終達(dá)到優(yōu)化性能的目的。
refs
refs其實(shí)是訪問DOM元素或組件實(shí)例是安全門饭于，refs的值其實(shí)是一個(gè)回調(diào)函數(shù)蜀踏，接受底層DOM元素或者被掛載的組件實(shí)例作為它的第一實(shí)例
(在構(gòu)造函數(shù)中)調(diào)用 super(props) 的目的是什么
在 super() 被調(diào)用之前，子類是不能使用 this 的掰吕，在 ES2015 中果覆，子類必須在 constructor 中調(diào)用 super()。傳遞 props 給 super() 的原因則是便于(在子類中)能在 constructor 訪問 this.props殖熟。
狀態(tài)(state)和屬性(props)之間有何不同
- State 是一種數(shù)據(jù)結(jié)構(gòu)局待，用于組件掛載時(shí)所需數(shù)據(jù)的默認(rèn)值。State 可能會(huì)隨著時(shí)間的推移而發(fā)生突變，但多數(shù)時(shí)候是作為用戶事件行為的結(jié)果钳榨。
- props 由父組件傳遞給子組件舰罚，并且就子組件而言，props 是不可變的薛耻。組件不能改變自身的 props
受控組件和非受控組件
- 受控組件：包含表單元素的組件將會(huì)在 state 中追蹤輸入的值营罢，并且每次調(diào)用回調(diào)函數(shù)時(shí)，如 onChange 會(huì)更新 state饼齿，確保數(shù)據(jù)來(lái)源的單一
- 非受控組件：不需要設(shè)置它的state屬性愤钾，而通過ref來(lái)操作真實(shí)的DOM。
為什么建議傳遞給 setState 的參數(shù)是一個(gè) callback 而不是一個(gè)對(duì)象
props和state 的更新可能是異步的候醒，不能依賴他們的值去計(jì)算下一個(gè)state
展示組件(Presentational component)和容器組件(Container component)之間有何不同
- 展示組件關(guān)心組件看起來(lái)是什么能颁。展示專門通過 props 接受數(shù)據(jù)和回調(diào)，并且?guī)缀醪粫?huì)有自身的狀態(tài)倒淫，但當(dāng)展示組件擁有自身的狀態(tài)時(shí)伙菊，通常也只關(guān)心 UI 狀態(tài)而不是數(shù)據(jù)的狀態(tài)。
- 容器組件則更關(guān)心組件是如何運(yùn)作的敌土。容器組件會(huì)為展示組件或者其它容器組件提供數(shù)據(jù)和行為(behavior)镜硕，它們會(huì)調(diào)用 Flux actions，并將其作為回調(diào)提供給展示組件返干。容器組件經(jīng)常是有狀態(tài)的兴枯，因?yàn)樗鼈兪?其它組件的)數(shù)據(jù)源。
何為 JSX
JSX 是 JavaScript 語(yǔ)法的一種語(yǔ)法擴(kuò)展矩欠，并擁有 JavaScript 的全部功能财剖。JSX 生產(chǎn) React "元素"，你可以將任何的 JavaScript 表達(dá)式封裝在花括號(hào)里癌淮，然后將其嵌入到 JSX 中躺坟。在編譯完成之后，JSX 表達(dá)式就變成了常規(guī)的 JavaScript 對(duì)象乳蓄，這意味著你可以在 if 語(yǔ)句和 for 循環(huán)內(nèi)部使用 JSX咪橙，將它賦值給變量，接受它作為參數(shù)虚倒，并從函數(shù)中返回它美侦。
為什么 JSX 中的組件名要以大寫字母開頭
小寫字母開頭: 內(nèi)置組件，HTML 元素魂奥，例如 <div>菠剩，<span>，會(huì)編譯成 React.createElement('div')捧弃。
大寫字母開頭：自定義組件或 JS 文件中導(dǎo)入的組件赠叼，例如 <Foo />擦囊，會(huì)編譯成 React.createElement(Foo)违霞。
JSX 語(yǔ)法依賴babel進(jìn)行解析
小寫字母開頭的 tagName 直接轉(zhuǎn)為 string 字符串嘴办；
JSX 中使用點(diǎn)語(yǔ)法時(shí)，不管是大寫還是小寫买鸽，最終都會(huì)解析成對(duì)象和屬性涧郊，而不是字符串，也所以雖然 C[p] 和 C.p 一樣眼五，但是 JSX 中 <c.p /> 可以解析而 <c[p] /> 不行妆艘。
