react
redux (所有數(shù)據(jù)都放入redux管理)
1铐料、redux中間件原理(middleware)
中間件提供第三方插件的模式，自定義攔截 action -> reducer 的過程。
變?yōu)?action -> middlewares -> reducer役拴。
這種機(jī)制可以讓我們改變數(shù)據(jù)流葫哗，實現(xiàn)如異步 action 作烟，action 過濾寺擂，日志輸出殉簸，異常報告等功能
常見的中間件：
redux-logger：提供日志輸出
redux-thunk（async/await）：處理異步操作
redux-promise：處理異步操作，actionCreator的返回值是promise
- middleware作用:
改裝dispatch
2沽讹、redux有什么缺點
一個組件所需要的數(shù)據(jù)，必須由父組件(provider)傳過來武鲁，而不能像flux中直接從store取
當(dāng)一個組件相關(guān)數(shù)據(jù)更新時，即使父組件不需要用到這個組件，父組件還是會重新render及穗，可能會有效率影響坤检，或者需要寫復(fù)雜的shouldComponentUpdate進(jìn)行判斷。
react組件的劃分業(yè)務(wù)組件技術(shù)組件饲梭？
根據(jù)組件的職責(zé)通常把組件分為UI組件和容器組件乘盖。
UI 組件負(fù)責(zé) UI 的呈現(xiàn)，容器組件負(fù)責(zé)管理數(shù)據(jù)和邏輯憔涉。
兩者通過React-Redux 提供connect方法聯(lián)系起來订框。
具體使用可以參照如下鏈接：http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_three_react-redux.html
react生命周期函數(shù)
1. react性能優(yōu)化是哪個周期函數(shù)？
shouldComponentUpdate 這個方法用來判斷是否需要調(diào)用render方法重新描繪dom兜叨。
因為dom的描繪非常消耗性能穿扳，如果我們能在shouldComponentUpdate方法中能夠?qū)懗龈鼉?yōu)化的dom diff算法衩侥，可以極大的提高性能。
為什么虛擬dom會提高性能?
虛擬dom相當(dāng)于在js和真實dom中間加了一個緩存矛物，利用dom diff算法避免了沒有必要的dom操作茫死，從而提高性能。
具體實現(xiàn)步驟如下：
用 JavaScript 對象結(jié)構(gòu)表示 DOM 樹的結(jié)構(gòu)履羞；然后用這個樹構(gòu)建一個真正的 DOM 樹峦萎，插到文檔當(dāng)中
狀態(tài)變更的時候，重新構(gòu)造一棵新的對象樹忆首。然后用新的樹和舊的樹進(jìn)行比較爱榔，記錄兩棵樹差異把2所記錄的差異應(yīng)用到步驟1所構(gòu)建的真正的DOM樹上，視圖就更新了
react性能優(yōu)化方案
- key值相同, 就直接復(fù)用, 不用再創(chuàng)建虛擬DOM對象
jsx
什么是 JSX 和我們怎樣在 JavaScript 代碼中書寫它 —— 瀏覽器是如何識別它的雄卷？
JSX 只是一種 Facebook 普及的標(biāo)記語法搓蚪，受益于 Babel/TSC 這些工具
我們能夠以一種更令賞心悅目的方式書寫 React.createElement 調(diào)用。
JSX 的技術(shù)原理以及隨之而來的限制;為什么甚至在我們的代碼并沒有使用 React 的情況下丁鹉，也需要在文件頂部 import React from 'react'妒潭；
為什么JSX中的組件名要以大寫字母開頭？
React 如何知道要渲染的是組件還是 HTML 元素就夠了揣钦。
解釋下“狀態(tài)提升(Context)”理念嗎?
- 它允許你在兄弟組件間傳遞數(shù)據(jù)
- 它允許你擁有更多純展示組件雳灾，更易復(fù)用
如果不能在組件間傳遞數(shù)據(jù)，你怎樣給多級組件傳遞數(shù)據(jù):
簡述flux 思想
Flux 的最大特點冯凹，就是數(shù)據(jù)的"單向流動"谎亩。
1.用戶訪問 View
2.View 發(fā)出用戶的 Action
3.Dispatcher 收到 Action，要求 Store 進(jìn)行相應(yīng)的更新
4.Store 更新后宇姚，發(fā)出一個"change"事件
5.View 收到"change"事件后匈庭，更新頁面
受控組件與非受控組件 :
受控組件:
在HTML中，標(biāo)簽<input>浑劳、<textarea>阱持、<select>的值的改變通常是根據(jù)用戶輸入進(jìn)行更新。在React中魔熏，可變狀態(tài)通常保存在組件的狀態(tài)屬性中衷咽，并且只能使用 setState() 更新，而呈現(xiàn)表單的React組件也控制著在后續(xù)用戶輸入時該表單中發(fā)生的情況蒜绽，以這種由React控制的輸入表單元素而改變其值的方式镶骗，稱為：“受控組件”。
非受控組件:
表單數(shù)據(jù)由DOM本身處理躲雅。即不受setState()的控制鼎姊，與傳統(tǒng)的HTML表單輸入相似，input輸入值即顯示最新值（使用 ref從DOM獲取表單值）
用法:
受控和非受控元素都有其優(yōu)點，根據(jù)具體情況選擇此蜈。如果表單在UI反饋方面非常簡單即横，則對ref進(jìn)行控制是完全正確的，即使用非受控組件
diff 算法:
immutale + redux + pureComponent對項目性能優(yōu)化
調(diào)用 setState, 會發(fā)生什么
- 兩種開發(fā)寫法 :
// 對象時簡寫:
setSate({
age: this.state.age + 1
})
browser's
// 官方推薦:
setState(()=>{
age: this.state.age + 1
})
- 由于setState是異步更新的所以, 當(dāng)連續(xù)點擊更新觸發(fā)setState, 導(dǎo)致數(shù)據(jù)變化過多
// 解決方法 :
setState((prevState)=>{
age: this.state.age + 1
}, ()=>{
})
- setState第二回調(diào), 是在setState的第一個回調(diào)頁面數(shù)據(jù)渲染后再調(diào)用
