【知識總結】前端高頻React面試題合集

React中keys的作用是什么

keys是react用于追蹤哪些元素被修改、 被添加、被移除的輔助標示，

render(){
	return(
		<ul>
			{
				this.state.list.map(({item,key})=>{
					return <li key={key}> {item} </li>
				})
			}
		</ul>
	)
}

在開發程序中，我們需要保證某個元素的key在其同級元素中具有唯一性，

在react diff演算法中react會借助元素的key來判斷元素是新創建的還是被移動而來的元素，從而減少不必要的元素重新渲染，此外，react還需要借助key值來判斷元素與本地狀態的關聯關系，因此我們絕不可忽視轉換函式中key的重要性，

當呼叫setState的時候，發生了什么

將傳遞給setState的物件合并到組件的當前狀態，這將啟動一個和解的程序，構建一個新的react元素樹，與上一個元素樹進行對比（diff），進而最小化的重渲染，

為什么setState的引數是一個callback

因為this.props和this.state的更新是異步的，不能依賴它們的值去計算下一個state

狀態state和屬性props之間有什么區別

• state是一種資料結構，用于組件掛載時需要資料的默認值，
• state可能會隨著時間的推移而發生突變，但多數時候是作為用戶事件行為的結果，
• props則是組件的配置，props由父組件傳遞給子組件，并且就子組件而言，props是不可變的，
• 組件不能改變自身的props，但是可以把子組件的props放在一起，統一管理，props也不僅僅是資料，回呼函式也可以通過props傳遞，

應該在React組件的何處發起Ajax請求

在React組件中，應該在componentDidMount中發起網路請求，這個方法會在組件第一次“掛載”時執行，在組件的生命周期中僅會執行一次，

更重要的是，不能保證在組件掛載之間Ajax請求已經完成，如果是這樣，也就以為在將嘗試在一個為掛載的組件上呼叫setState，這不會起任何作用，

所有在componentDidMount中發起網路請求就保證了這一個組件可以更新了，

React中的三種組件構建的方式

React.createClass() 、ES6 Class 、無狀態函式

React中的refs的作用是什么

Refs是<span></span> React提供給我們的安全訪問DOM元素或者某個組件實體的句柄，
我們可以為元素添加ref屬性，然后在回呼函式中接受該元素在DOM樹中的句柄，該值會作為回呼函式的第一個引數回傳：

class CustomForm extends Component{
	handleSubmit = () => {
		console.log('Input Value: ',this.input.value);
	};
	render(){
		return(
			<form onSubmit={this.handleSubmit}>
				<input type='text' ref={input=> (this.input = input)}/>
				<button type='submit'> Submit </button>
			</form>
		)
	}
}

上面例子中input包含了一個ref屬性，該屬性宣告的回呼函式會接收input對應的DOM元素，我們將其系結到指定this指標以便在其他的類函式中使用，

描述react diff的原理

把樹形結構按層級分解，只比較同級元素，

給串列結構的每一個單元添加唯一的key屬性，方便比較，

react只會匹配相同的class的component合并操作，呼叫component的setState的時候，react將其標記為dirty，到每一個事件回圈結束，react檢查所有標記dirty的component重新繪制，選擇性子樹渲染，

開發人員可以重寫shouldComponentUpdate提高diff的性能，

說說React的優勢

1. react速度很快：它并不直接對DOM進行操作，引入了一個叫做虛擬DOM的概念，安插在JavaScript邏輯和實際DOM直接，性能好，
2. 跨瀏覽器兼容：虛擬DOM幫助我們解決了跨瀏覽器問題，為我們提供了標準化的API，甚至在IE8中都是沒問題的，
3. 一切都是component：代碼更加模塊化，重用代碼更容易，可維護性高，
4. 單向資料流，Flux樹一個用于在JavaScript應用中創建單向資料層的結構，它隨著React視圖庫的開放而被Facebook概念化，
5. 同構、純粹的JavaScript：因為搜索引擎的爬蟲程式依賴的是服務端相應而不是JavaScript的執行，預渲染你的應用有助于搜索引擎優化，
6. 兼容性好：比如使用RequireJS來加載和打包，而Broeserify和Webpack適用于構建大型應用，

react生命周期函式有哪些

• getDefaultProps：獲取實體的默認屬性
• getInitialState：獲取每個實體的初始化狀態
• componentWillMount：組件即將被裝載、渲染在頁面上
• render：組件在這里生成虛擬DOM節點
• componentDidMount：組件真正的被裝載之后運行中狀態
• componentWillReceiveProps：組件將要接收到屬性的時候呼叫
• shouldComponentUpdate：組件接受到新屬性或者新狀態的時候
• componentWillUpdate：組件即將更新不能修改屬性和狀態
• render：組件重新描繪
• componentDidUpdate：組件已更新
• componetWillUnmount：組件即將銷毀

this的各種情況

call、apply、bind指的是this上誰就是誰

• fun.call (obj, a, b)
• fun.apply (obj, [ ])
• fun.bind(obj, a, b)()

this的情況：

• 以函式形式呼叫，this永遠都是window
• 以方法的形式呼叫，this是呼叫方法的物件
• 以建構式的形式呼叫，this新創建的那個物件
• 使用call和apply呼叫，this是指定的那個物件
• 箭頭函式：箭頭函式的this看外層是否有函式，如果有，外層函式的this就是內部箭頭函式的this；如果沒有，就是window
• 特殊情況：通常意義上this指標指向為最后呼叫它的物件，這里需要注意的一點是如果回傳值是一個物件，那么this指向的就是那個回傳的物件，如果回傳值不是一個物件，那么this還是指向函式的實體，

介紹promise，例外捕獲，如果進行例外處理

promise是解決回呼地獄的好工具，比起直接使用回呼函式promise的語法更加清晰，代碼的可讀性大大增加，

老舊瀏覽器沒有promise全域物件怎么辦？

可以使用es6-promise-polyfill，可以使用頁面標簽直接引入，也可以使用es6的import方法引入，引入之后，它就會在window物件中加入promise物件，這樣我們就可以全域使用promise了，

如何進行例外處理？

參照promise的檔案，我們可以在reject回呼和catch中處理例外，但promise規定如果一個錯誤在reject函式中被處理，那么promise將從例外常態中恢復過來，這意味著接下來的then方法將接收一個resolve回呼，

大多數時候我們希望發生錯誤的時候，promise處理當前的例外并中斷后續的then操作，我們先來看一個使用reject處理例外的例子：

var promiseStart = new Promise(function(resolve, reject){
	reject('promise is rejected');
});
promiseStart.then(function(response){
	console.log('resolved');
	return new Promise(function(resolve,reject){
		resolve('promise is resolved');
	});
})
.then(function(response){
	console.log('resolved:',response);
})
.catch(function(error){
	console.log('catched:',error);
})

輸出：
catched: promise is resolved

React怎么做資料的檢查和變化

• props：組件屬性， 專門用來連接父子組件間通信，父組件傳輸父類成員，子組件可以利用但不能編輯父類成員，
• state：專門負責保存和改變組件內部的狀態，

資料傳遞

在react中，父組件給子組件傳遞資料時，通過給子組件設定props的方式，子組件取得props中的值，即可完成資料傳遞，被傳遞資料的格式是可以是任何js可識別的資料結構，

資料改變

props不能被自身修改，如果組件內部的屬性發生變化使用state，

react會實時監聽每個組件的props和state的值，一旦有變化，會立刻更新組件，將結果重新渲染到頁面上，

介紹常見的react優化方式

react渲染性能優化的三個方向：

• 減少計算量：對應到react中就是減少渲染的節點，或者降低組件渲染的復雜度，
• 利用快取：對應到react中就是如何避免重新渲染，利用函式式編程的memo方式來避免組件重新渲染，
• 精確重新計算的范圍：對應到react中就是系結組件和狀態的關系，精確判斷更新的時機和范圍，降低渲染范圍，

檔案上傳如何做斷點續傳

核心是利用Blob.prototype.slice方法，它和陣列的slice方法相似，呼叫的slice方法可以回傳原檔案的某個切片，

這樣我們就可以根據預先設定好的切片最大數量將檔案切分為一個個切片，然后借助http的可并發性，同時上傳多個切片，這樣從原文傳一個大檔案，變成了同時傳多個小的檔案切片，可以大大減少上傳時間，

另外由于是并發，傳輸到服務器的順序可能會發現變化，所有我們還需要給每個切片記錄順序，

通過什么方式做到并發請求

使用異步promise ALL 或者web wroker

redux的主要作用和使用方式

主要作用：把所有的state集中到組件頂部，能夠靈活的將所有的state各取所需的分發給所有的組件，

• store：保存資料的地方
• state：包含所有的資料，一個state對應一個view，只要state相同，view就相同，
• action：view發出的通知action，改變state，從而改變view，修改state的唯一辦法就是action，

React組件通信方式如何？

父傳子

父組件向子組件通過props的方式，向子組件進行通信，

子傳父

props + 回呼的方式，父組件向子組件傳遞props進行通訊，此props的作用與為父組件自身的函式，子組件呼叫該函式，將子組件要傳遞的資訊作為引數傳遞到父組件的作用域中，

兄弟間

找到這兩個兄弟節點共同的父節點，結合上面兩種方式，由父組件轉發資訊進行通信，

跨層級通信

context設計目的是為了共享哪些對于一個組件樹而言是“全域”的資料，例如當前認證的用戶、主題、首選語言，對于跨越多層的全域資料通過context通信再合適不過，

const StateContext = React.createContext()
class Parent extends React.Component{
	render(
		return(
			<StateContext.Provider value='hello'> //value就是傳入Context的值
				<Child/>
			</StateContext.Provider>
		)
	)
}
class Child extends React.Component{
	render(){
		return(
			<ThemeContext.Consumer>
			{
				context=>(
					name is {context} //取出值
				)
			}
			</ThemeContext.Consumer>
		)；
	}
}

發布訂閱模式

發布者發布事件，訂閱者監聽事件并做出反應，我們可以通過引入event模塊進行通信，

全域狀態管理工具

借助redux 或者 Mobx等全域狀態管理工具進行通信，這種工具會維護一個全域狀態中心Store，并根據不同的事件產生新的狀態，

redux 中如何進行異步操作

當然，我們可以在componentDidmount中直接進行請求無需借助redux，

但在一定規模的專案中，上述方法很難進行異步流的管理，通常情況下我們會借助redux的異步中間件進行異步處理，

redux的異步流中間件其實又很多，當下主流的異步中間件只有兩種：redux-thunk、redux-saga，當然redux-observable可能也有資格占據一席之地，

React如何進行組件/邏輯復用

拋開已被官方棄用的Mixin，組件抽象的技術目前有三種比較主流：

1）高階組件

高階組件是react中服用邏輯的一種高級技巧，簡而言之，高階組件就是一個函式，它接受一個組件為引數，回傳一個新的組件，

高階組件定義：

function HocComponent(WrappedComponent){
	return class ProxyComponent extends React.Component{
		render(){
			return <WrappedComponent {...this.props}>
		}
	}
}

高階組件約定：

• 將不相關的props傳遞給被包裹的組件
• 最大化可組合性
• 包裝顯示名稱以便輕松除錯

高階組件注意事項：

• 不要在函式內修改原組件
• 使用反向繼承方式時，會丟失原本的顯示名
• 不要在render函式中使用HOC

高階組件的缺點：

• 難以溯源，如果原始組件A通過好幾個HOC的構造，最終生成了組件B，不知道哪個屬性來自于哪個HOC，需要翻看每個HOC才知道各自做了什么事情，
• props屬性名的沖突，某個屬性可能被多個HOC重復使用，
• 靜態構建，新的組件是在頁面構建之前完成，先有組件，后生成頁面，

2）渲染屬性（render props）

render props 是一個用于告知組件渲染什么內容的函式屬性，該函式回傳一個組件，是渲染出來的內容，

作用是為了功能的復用，與HOC類似；其次是組件間的資料單項傳遞，

相對于高階組件的優點：

• 不用擔心props的命名沖突問題，
• 可以溯源，子組件的props一定來自父組件，
• 是動態構建的，頁面在渲染后，可以動態地決定渲染哪個組件，
• 所有能用HOC完成的事情，render props都可以做，且更加靈活，
• 除了功能復用，還可以用作兩個組件的單向資料傳遞，

3）Hooks（推薦使用）

在一個函式中定義的state，可以直接拿到另一個函式中使用，有了hooks，這種看似不可能的語法確實行得通，hook的優勢不僅體現在代碼量上，從風格上來說，也顯得語意更清晰、結構更優雅，

更重要的是，上述兩種模式的種種缺點，它一個都沒有

類組件和函陣列件之間的區別是啥

• 類組件可以使用其他特性，如狀態state和生命周期鉤子，
• 當組件只接受props渲染到頁面，就是無狀態組件，就屬于函陣列件，也被稱為啞組件或者展示組件，
• 函陣列件和類組件當然是有區別的，而且函陣列件的性能比類組件的性能要高，因為類組件使用的時候要實體化，而函陣列件直接執行函式取回傳結構即可，為了提高性能，盡量使用函陣列件，
• 區別函陣列件和類組件看是否有this、是否有生命周期、是否有狀態state

你了解Virtual DOM嗎？解釋一下它的作業原理

Virtual DOM是一個輕量級的JavaScript物件，它最初是real DOM的副本，它是一個節點樹，將元素、屬性、內容作為物件及其屬性，

react的渲染函式從react組件中創建一個節點樹，然后它回應資料模型的變化來更新樹，該變化是由用戶或系統完成的各種動作引起的，

Virtual DOM有三個簡單的步驟：

1. 每當底層資料發生改變時，整個UI都將在Virtual DOM描述中重新渲染，
2. 然后計算之前的DOM表示與新表述的之間的差異，
3. 完成計算后，將只用實際更改的內容更新real DOM，

MVC框架的主要問題是什么

• 對DOM操作的代價非常高
• 程式運行緩慢且效率低下
• 內容浪費嚴重
• 由于回圈依賴性，組件模型需要圍繞models和views進行創建

解釋Reducer的作用

reducers是純函式，它規定應用程式的狀態怎樣因回應Action而變化，reducer通過接受先前的狀態和action來作業，然后它回傳一個新的狀態，它根據操作的型別確定需要執行哪種更新，然后回傳新的值，如果不需要完成任務，它會回傳原來的狀態，

Redux有哪些優點

• 結果可預測性：由于總是存在一個真實來源，即store，因此不存在如何將當前狀態與動作和應用的其他部分同步的問題，
• 可維護性：代碼變得更容易維護，具有可預測的結果和嚴格的結構，
• 服務器端渲染：你只需要將服務器上創建的store傳到客戶端即可，這對初始渲染非常有用，并且可以優化應用性能，從而提供更好的用戶體驗，
• 開發人員工具：從操作到狀態更改，開發人員都可以實時跟蹤應用中發生的所有事情，
• 易于測驗：redux的代碼主要是小巧、純碎和獨立的功能，這使代碼可測驗且獨立，

為什么React Router中使用switch關鍵字

當你想要僅顯示要在多個定義的路由中呈現單個路由時，可以使用switch關鍵字，它會按順序將已定義的URL與已定義的路由進行匹配，找到第一個匹配項后，它將渲染指定的路徑，從而繞過其他路線，

說說React Router的優點

• 無需手動設定歷史值：在react router v4中，我們要做的就是將路由包裝在<BrowserRouter>組件中，
• 包是分開的：共有三個包，分別用于Web、Native、Core，這使我們應用更加緊湊，

列出Redux的組件

• Action：用來描述發生了什么事情的物件
• Reducer：確定狀態將來如何變化的地方
• Store：整個程式的狀態/物件樹保存在Store
• View：只顯示Store提供的資料

在建構式中呼叫super(props)的目的是什么

• 在super()被呼叫之前，子類是不能使用this的，在ES2015中，子類必須在constructor中呼叫super()
• 傳遞props給super()的原因是便于在子類中能在constructor訪問this.props

除了在建構式中系結this，還有其他方式嗎

可以使用屬性初始值設定項property initializers來正確系結回呼，create-react-app也是默認支持的，

如果告訴react它應該是編譯生產環境版本

通常情況下，我們會使用Webpack和DefinePlugin方法來將NODE_ENV變數值設定為production，

編譯版本中react忽略了propType驗證以及其他的告警資訊，同時還會降低代碼庫的大小，react是用來Uglify插件來移除生產環境下不必要的注釋等資訊，

shouldComponentUpdate的作用

shouldComponentUpdate允許我們手動的判斷是否要進行組件更新根據組件的應用設定函式的合理回傳值能夠幫我們避免不必要的更新，

createElement和cloneElement的區別是什么

createElement函式是JSX編譯之后使用的創建的函式，

cloneElement是用于復制某個元素并傳入新的props，

你用過哪些redux中間件

中間件提供第三方插件的模式自定義攔截：

action -> reducer的程序變為action -> middlewares -> reducer

這種機制可以讓我們改變資料流實作異步action

• redux-logger：提供日志輸出
• redux-thunk：處理異步操作
• redux-promies：處理異步操作，actionCreator的回傳值是promis

redux有什么缺點

一個組件所需要的資料必須由父組件傳遞過來，

當一個組件相關資料更新時即使父組件不需要用到這個組件，父組件還是會從重新render可能有效率影響或者要寫更復雜的shouldComponentUpdate進行判斷，

React Portal有哪些使用場景

在以前react中所有的組件都會位于#app 下而使用Portals提供了一種脫離#app的組件，因此Portals適合脫離檔案流的組件特別是：position:absolute 與 position:fixed的組件，

React Hooks當中的useEffect是如何區分生命周期鉤子的

useEffect可以看成是componentDidMound、componentDidupdate、componentWillUnmount三者的結合，

useEffect(callback, [source])接受兩個引數的呼叫方式如下：

useEffect(()=>{
	console.log('mounted');
	return ()=>{
		console.log('willUnmount');
	}
},[source]);

生命周期函式的呼叫主要是通過第二個引數[source]來進行控制有如下幾個情況：

• [source]引數不傳時：每次都會優先呼叫上次保存的函式中回傳的那個函式，再呼叫外部那個函式，
• [source]引數傳[ ]時：外部的函式只會在初始化時呼叫一次回傳的那個函式，也只會最終在組件卸載時呼叫一次，
• [source]引數有值時：只會監聽到陣列中的值發生變化后，優先呼叫回傳的那個函式，再呼叫外部的函式，

React實作的移動應用中如果出現卡頓有哪些可以考慮的優化方案

• 增加shouldComponentUpdate鉤子對新舊props進行比較，如果值相同則阻止更新，避免不必要的渲染，或者使用PureReactComponent替代Component其內部已經封裝來shouldComponentUpdate的淺比較邏輯，
• 對于串列或其他結構相同的節點，為其中每一項增加唯一key屬性方便react的diff演算法中對該節點的復用，減少節點的創建和洗掉操作，
• 組件的props如果需要經過一系列運算后才能拿到最終結果可以考慮使用reselect庫對結果進行快取，
• webpack-bundle-analyzer分析當前頁面的依賴包是否存在不合理性，如果存在著到并進行優化，

關于生命周期鉤子useEffect

在React Hooks中useEffect可以看作是componentDidMount、componentDidUpdate、componentWillUnmount的結合，

• useEffect(callback,[source])接收兩個引數
• callback：鉤子回呼函式
• source：設定觸發條件，僅當source發生改變時才會觸發
• useEffect鉤子在沒穿入[source]引數時默認在每次render時都會優先呼叫上次保存的回呼回傳的函式后在重新呼叫回呼

通過第二個引數我們便可以模擬出幾個常用的生命周期：

• componentDidMount：傳入[ ]時就只會在初始化時呼叫一次
• const useMount = (fn)=> useEffect(fn, [ ] )
• componentWillUnmount：傳入[ ]回呼中的回傳函式也只會被最終執行一次
• const useUnmount = (fn)=> useEffect(()=>fn, [ ])
• mounted：可以使用useState封裝才一個高度可服用的mounted狀態

const useMounted = () => {
	const [mounted,setMounted] = useState(false);
	useEffect(()=>{
		!mounted && setMounted(true);
		return ()=> setMounted(false);
	},[]);
	return mounted;
}
componentDidUpdate: useEffect每次均會執行其實就是排除了DidMount后即可
const mounted = useMounted()
useEffect (()=>{
	mounted && fn()
})

其他內置鉤子：

• useContext：獲取context物件
• useReducer：類似于redux思想的實作但其并不足以替代redux可以理解成一個組件內部的redux，
• useCallback：快取回呼函式避免傳入的回呼每次都是新的函式實體而導致依賴組件重新渲染具有性能優化的效果，
• useMemo：用于快取傳入的props避免依賴的組件每次都重新渲染
• useRef：獲取組件的真實節點
• useEffect屬于異步執行并不會等待DOM真正渲染后執行，而useLayoutEffect則會真正渲染后才觸發，

pureComponent和FunctionComponent區別

pureComponent和component完全相同，

但是在shouldComponentUpdate實作中pureComponent使用了props和state淺比較，

主要作用是用來提高某些特定場景的性能，

redux實作原理

為什么用redux

在react中資料在組件中是單向流動的，資料從一個方向父組件流向子組件通過props，所有兩個非父組件間通信相對麻煩，redux的出現就是為了解決state里面的資料問題

redux設計理念

redux是將整個應用狀態存盤到一個地方稱為store，里面保存著一個狀態樹store tree，
組件可以派發dispatch行為給store，而不是直接通知其他組件，組件內部通過訂閱store中的狀態state來重繪自己的視圖，

redux的三大原則

1. 唯一資料源：整個應用的state都被存盤到一個狀態樹里面，并且這個狀態樹只存在于唯一的store中
2. 保持只讀狀態：state是只讀的，唯一改變state的方法就是觸發action，action是一個用于描述以發生時間的普通物件，
3. 資料改變只能通過純函式來執行：使用純函式來執行修改為了描述action如何改變state的你需要撰寫一個reducers

connect原理

首先connect之所以會成功是因為Provider組件，在原應用組件上包裹一層使原來整個應用成為Provider的子組件，接收redux的store作為props通過context物件傳遞給子孫組件上的connect，

connect上一個高階函式，首先傳入mapStateToProps、mapDispatchToProps，然后回傳一個生產component的函式，再將真正的component作為引數傳入wrapWithConnect，這樣就生產出一個經過包裹的connect組件，該組件具有如下特點：

• 通過props.store獲取祖先的component的store
• props暴多state props、dispatchprops、parentprops，合并一起得到nextState作為props傳給真正的component componentDidMount時添加事件this.store.subscribe實作頁面互動
• shouldComponentUpdate時判斷是否有避免進行渲染提升頁面性能并得到nextState

React的渲染程序中兄弟節點之間是怎么處理key值不一樣的時候

通常我們輸出節點的時候都是map一個陣列，然后回傳一個ReactNode，為了方便內部進行優化，我們必須給每一個ReactNode添加key，這個key prop再設計值處不是給開發者用的，而是給react用的，大概的作用就是給每一個ReactNode添加一個身份標識，以方便react進行識別在重渲染程序中如果key一樣，若有組件屬性變化，則react只更新組件對于的屬性；反之若無屬性變化，則不更新；如果key不一樣則react先銷毀組件然后重新創建該組件，

react-router里面的<Link>標簽和<a>標簽有什么區別

react-router是伴隨著react框架出現的路有系統，它也是公認的一種優秀的路有解決方案，

在使用react-router時候，我們常常會使用其自帶的路徑跳轉組件Link實作，對比a標簽，Link組件避免了不必要的重渲染，

setState到底是異步還是同步

有時候表現出異步，有時候表現出同步

• setState只在合成事件和鉤子函式中是異步的，在原生事件和setTimeout中都是同步的
• setState的異步并不是說內部由異步代碼實作，其本身執行的程序和代碼都是同步的，只是合成事件和鉤子函式的呼叫順序在更新之前，導致它們沒法立刻拿到更新后的值，
• 形成了所謂的異步可以通過第二個引數setState(partialState,callback)中的callback拿到更新后的結果，
• setState的批量更新優化也是建立在異步合成事件、鉤子函式之上的，在原生事件和setTimeout中不會批量更新，在異步中，如果對同一個值多次進行setState的批量更新，會對其覆寫取最后一次的執行結果，

說說你用react有什么坑點？

• JSX做運算式判斷時候需要強轉為boolean型別，
• 盡量不要在componentWillReviceProps里使用setState，如果一定要使用需要判斷結束條件，不然會出現無限重渲染導致頁面崩潰，
• 給組件添加ref的時候盡量不要使用匿名函式，因為當組件更新的時候匿名函式會被當作新的prop處理讓ref屬性接收到金函式的時候，react內部會先清空ref，也就是會以bull為回呼引數先執行一次ref，
• 遍歷子節點的時候不要用index作為組件的key進行傳入

react性能優化方案

• 重寫shouldComponentUpdate來避免不必要的dom操作
• 使用<span></span> production版的react.js
• 使用key來幫助react識別串列中所有子組件的最小變化

傳入setState函式的第二個引數的作用是什么

該函式會在setState函式呼叫完成并且組件開始重渲染的時候呼叫，我們可以用該函式來監聽渲染是否完成：

this.setState(
	{username:'heiheihe'},
	()=> console.log('setState has finished and the component has re-rendered')
)
this.setState((prevState,props)=>{
	return{
		streak:prevState.streak + props.count
	}
})

react性能優化是哪個周期函式

shouldComponentUpdate這個方法來判斷是否需要呼叫render方法來重新描繪dom，因為dom的描繪非常消耗性能，