沒看第一篇的朋友可以移步先去看第一篇：新手學習 react 迷惑的點(一)

創(chuàng)新互聯(lián)公司于2013年開始，先為渾江等服務建站，渾江等地企業(yè)，進行企業(yè)商務咨詢服務。為渾江企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務解決您的所有建站問題。

第一篇反響也還不錯，很多新手都覺得很有幫助，解答了他們很久以來的疑惑，其實第一篇里面的還算基礎的，主要是 ES6 語法和 JSX 沒有深刻理解。

這第二篇稍微要難一點，有的需要了解 React 的原理才能搞明白的，不過你放心，我都用了最簡單最簡單的語言，即使你是個新手，如果產(chǎn)生了這些疑問，你也能看懂。

下面開始吧！

為什么調(diào)用方法要 bind this

前提知識：?深刻的理解 JavaScript 中的 this

相信剛寫 React 的時候，很多朋友可能會寫類似這樣的代碼：

class?Foo?extends?React.Component?{
?handleClick?()?{
?this.setState({?xxx:?aaa?})
?}
?render()?{
?return?(
?<button?onClick={this.handleClick}>
?Click?me
?</button>
?)
?}
}
復制代碼

發(fā)現(xiàn)會報 this 是 undefined 的錯，然后可能對事件處理比較疑惑，然后去看官網(wǎng)的事件處理有下面一段話：

你必須謹慎對待 JSX 回調(diào)函數(shù)中的 this，在 JavaScript 中，class 的方法默認不會綁定this。如果你忘記綁定 this.handleClick 并把它傳入了 onClick，當你調(diào)用這個函數(shù)的時候 this 的值為 undefined。這并不是 React 特有的行為；這其實與 JavaScript 函數(shù)工作原理有關。通常情況下，如果你沒有在方法后面添加 ()，例如 onClick={this.handleClick}，你應該為這個方法綁定 this。

然后你看了官網(wǎng)的例子和建議之后，知道需要為事件處理函數(shù)綁定 this就能解決，想下面這樣：

class?Foo?extends?React.Component?{
?handleClick?()?{
?this.setState({?xxx:?aaa?})
?}
?render()?{
?return?(
?<button?onClick={this.handleClick.bind(this)}>
?Click?me
?</button>
?)
?}
}
復制代碼

但是可能你沒有去思考過為什么需要 bind this？如果你不能理解的話，還是 js 的基礎沒有打好。

React 是如何處理事件的？

咱們先來了解一下 React 是如何處理事件的。

React 的事件是合成事件， 內(nèi)部原理非常復雜，我這里只把關鍵性，可以用來解答這個問題的原理部分進行介紹即可(后面應該會寫一篇 react 的事件原理，敬請期待)。

上篇文章已經(jīng)說過，jsx 實際上是 React.createElement(component, props, …children) 函數(shù)提供的語法糖，那么這段 jsx 代碼：

?<button?onClick={this.handleClick}>
?Click?me
?</button>
復制代碼

會被轉化為：

React.createElement("button",?{
?onClick:?this.handleClick
},?"Click?me")
復制代碼

了解了上面的，然后簡單的理解 react 如何處理事件的，React 在組件加載(mount)和更新(update)時，將事件通過 addEventListener 統(tǒng)一注冊到 document 上，然后會有一個事件池存儲了所有的事件，當事件觸發(fā)的時候，通過 dispatchEvent 進行事件分發(fā)。

所以你可以簡單的理解為，最終 this.handleClick 會作為一個回調(diào)函數(shù)調(diào)用。

理解了這個，然后再來看看回調(diào)函數(shù)為什么就會丟失 this。

this 簡單回顧

在函數(shù)內(nèi)部，this的值取決于函數(shù)被調(diào)用的方式。

如果你不能理解上面那句話，那么你可能需要停下來閱讀文章，去查一下相關資料，否則你可能看不懂下面的，如果你懶的話，就看為你準備好的 MDN 吧。

通過上面對事件處理的介紹，來模擬一下在類組件的 render 函數(shù)中， 有點類似于做了這樣的操作:

class?Foo?{
?sayThis?()?{
?console.log(this);?//?這里的?`this`?指向誰？
?}
?
?exec?(cb)?{
?cb();
?}
?
?render?()?{
?this.exec(this.sayThis);
?}
}
var?foo?=?new?Foo();
foo.render();?//?輸出結果是什么？
復制代碼

你會發(fā)現(xiàn)最終結果輸出的是 undefined，如果你不理解為什么輸出的是 undefined，那么還是上面說的，需要去深刻的理解 this 的原理。如果你能理解輸出的是 undefined，那么我覺得你就可以理解為什么需要 bind this 了。

那么你可能會問：**為什么React沒有自動的把 bind 集成到 render 方法中呢?**在 exec 調(diào)用回調(diào)的時候綁定進去，像這樣：

class?Foo?{
?sayThis?()?{
?console.log(this);?//?這里的?`this`?指向誰？
?}
?exec?(cb)?{
?cb.bind(this)();
?}
?render?()?{
?this.exec(this.sayThis);
?}
}
var?foo?=?new?Foo();
foo.render();?//?輸出結果是什么？
復制代碼

因為 render 多次調(diào)用每次都要 bind 會影響性能，所以官方建議你自己在 constructor 中手動 bind 達到性能優(yōu)化。

四種事件處理對比

對于事件處理的寫法也有好幾種，咱們來進行對比一下：

1. 直接 bind this 型

就是像文章開始的那樣，直接在事件那里 bind this

class?Foo?extends?React.Component?{
?handleClick?()?{
?this.setState({?xxx:?aaa?})
?}
?render()?{
?return?(
?<button?onClick={this.handleClick.bind(this)}>
?Click?me
?</button>
?)
?}
}
復制代碼

優(yōu)點：寫起來順手，一口氣就能把這個邏輯寫完，不用移動光標到其他地方。

缺點：性能不太好，這種方式跟 react 內(nèi)部幫你 bind 一樣的，每次 render 都會進行 bind，而且如果有兩個元素的事件處理函數(shù)式同一個，也還是要進行 bind，這樣會多寫點代碼，而且進行兩次 bind，性能不是太好。(其實這點性能往往不會是性能瓶頸的地方，如果你覺得順手，這樣寫完全沒問題)

2. constuctor 手動 bind 型

class?Foo?extends?React.Component?{
?constuctor(props)?{
?super(props)
?this.handleClick?=?this.handleClick.bind(this)
?}
?handleClick?()?{
?this.setState({?xxx:?aaa?})
?}
?render()?{
?return?(
?<button?onClick={this.handleClick}>
?Click?me
?</button>
?)
?}
}
復制代碼

優(yōu)點：?相比于第一種性能更好，因為構造函數(shù)只執(zhí)行一次，那么只會 bind 一次，而且如果有多個元素都需要調(diào)用這個函數(shù)，也不需要重復 bind，基本上解決了第一種的兩個缺點。

缺點：?沒有明顯缺點，硬要說的話就是太丑了，然后不順手(我覺得丑，你覺得不丑就這么寫就行了)。

3. 箭頭函數(shù)型

class?Foo?extends?React.Component?{
?handleClick?()?{
?this.setState({?xxx:?aaa?})
?}
?render()?{
?return?(
?<button?onClick={(e)?=>?this.handleClick(e)}>
?Click?me
?</button>
?)
?}
}
復制代碼

優(yōu)點：?順手，好看。

缺點：?每次 render 都會重復創(chuàng)建函數(shù)，性能會差一點。

4. public class fields 型

這種 class fields還處于實驗階段，據(jù)我所知目前還沒有被納入標準，具體可見這里。

class?Foo?extends?React.Component?{
?handleClick?=?()?=>?{
?this.setState({?xxx:?aaa?})
?}
?render()?{
?return?(
?<button?onClick={this.handleClick}>
?Click?me
?</button>
?)
?}
}
復制代碼

優(yōu)點：?好看，性能好。

缺點：?沒有明顯缺點，如果硬要說可能就是要多裝一個 babel 插件來支持這種語法。

總結

我平時用的就這四種寫法，我這邊從代碼的美觀性、性能以及是否順手方便對各種寫法做了簡單的對比。其實每種方法在項目里用都是沒什么問題的，性能方面基本上可以忽略，對于美觀性和順手比較主觀，所以總體來說就是看大家的偏好咯，如果硬要推薦的話，我還是比較推薦第四種寫法，美觀而且不影響性能。

為什么要 setState，而不是直接 this.state.xx = oo

這個問題是我們公司后端寫 React 的時候提出的問題，為啥不能直接修改 state，要 setState 一下。我在想，從 vue 轉到 React 可能也會有這種疑問，因為 vue 修改狀態(tài)都是直接改的。

如果我們了解 setState 的原理的話，可能就能解答這個問題了，setState 做的事情不僅僅只是修改了 this.state 的值，另外最重要的是它會觸發(fā) React 的更新機制，會進行 diff ，然后將 patch 部分更新到真實 dom 里。

如果你直接 this.state.xx == oo 的話，state 的值確實會改，但是改了不會觸發(fā) UI 的更新，那就不是數(shù)據(jù)驅(qū)動了。

那為什么 Vue 直接修改 data 可以觸發(fā) UI 的更新呢？因為 Vue 在創(chuàng)建 UI 的時候會把這些 data 給收集起來，并且在這些 data 的訪問器屬性 setter 進行了重寫，在這個重寫的方法里會去觸發(fā) UI 的更新。如果你想更多的了解 vue 的原理，可以去購買染陌大佬的剖析 Vue.js 內(nèi)部運行機制。

不明白訪問器屬性的可以看這篇文章：深入理解JS里的對象

setState 是同步還是異步相關問題

1. setState 是同步還是異步？

我的回答是執(zhí)行過程代碼同步的，只是合成事件和鉤子函數(shù)的調(diào)用順序在更新之前，導致在合成事件和鉤子函數(shù)中沒法立馬拿到更新后的值，形式了所謂的“異步”，所以表現(xiàn)出來有時是同步，有時是“異步”。

2. 何時是同步，何時是異步呢？

只在合成事件和鉤子函數(shù)中是“異步”的，在原生事件和 setTimeout/setInterval等原生 API 中都是同步的。簡單的可以理解為被 React 控制的函數(shù)里面就會表現(xiàn)出“異步”，反之表現(xiàn)為同步。

3. 那為什么會出現(xiàn)異步的情況呢？

為了做性能優(yōu)化，將 state 的更新延緩到最后批量合并再去渲染對于應用的性能優(yōu)化是有極大好處的，如果每次的狀態(tài)改變都去重新渲染真實 dom，那么它將帶來巨大的性能消耗。

4. 那如何在表現(xiàn)出異步的函數(shù)里可以準確拿到更新后的 state 呢？

通過第二個參數(shù) setState(partialState, callback) 中的 callback 拿到更新后的結果。

或者可以通過給 setState 傳遞函數(shù)來表現(xiàn)出同步的情況：

this.setState((state)?=>?{
	return?{?val:?newVal?}
})
復制代碼

5. 那表現(xiàn)出異步的原理是怎么樣的呢？

直接講源碼肯定篇幅不夠，可以看這篇文章：你真的理解setState嗎？。

我這里還是用最簡單的語言讓你理解：在 React 的 setState 函數(shù)實現(xiàn)中，會根據(jù) isBatchingUpdates(默認是 false) 變量判斷是否直接更新 this.state 還是放到隊列中稍后更新。然后有一個 batchedUpdate 函數(shù)，可以修改 isBatchingUpdates 為 true，當 React 調(diào)用事件處理函數(shù)之前，或者生命周期函數(shù)之前就會調(diào)用 batchedUpdate 函數(shù)，這樣的話，setState 就不會同步更新 this.state，而是放到更新隊列里面后續(xù)更新。

這樣你就可以理解為什么原生事件和 setTimeout/setinterval 里面調(diào)用 this.state 會同步更新了吧，因為通過這些函數(shù)調(diào)用的 React 沒辦法去調(diào)用 batchedUpdate 函數(shù)將 isBatchingUpdates 設置為 true，那么這個時候 setState 的時候默認就是 false，那么就會同步更新。

最后

setState 是 React 非常重要的一個方法，值得大家好好去研究一下他的原理。

有更多視頻資料，加小可樂丫

網(wǎng)頁題目：新手學習react迷惑的點(二)
標題路徑：http://jinyejixie.com/article0/jpccio.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供虛擬主機、網(wǎng)站建設、全網(wǎng)營銷推廣、標簽優(yōu)化、網(wǎng)站改版、品牌網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)