這兩天幾個(gè)群都在傳尤大噴 React 文檔的截圖，并且引起了熱烈的討論。然后就有人在問(wèn)，是不是 React 真的那么坑。

作為一個(gè) React 深度使用者，覺(jué)得不應(yīng)該讓新學(xué) React 的朋友留下這樣一個(gè)刻板印象，所以我結(jié)合自身對(duì)于 React 的使用體驗(yàn)，反駁一下他的觀點(diǎn)。

看一下尤大是怎么噴的。先是有個(gè)人發(fā)文吹了一波 React 新官網(wǎng)寫得很用心。

然后尤大不知道為什么怨念會(huì)這么深，就說(shuō) React 挖下了許多艱深復(fù)雜的坑，用了夸張的手法來(lái)特意強(qiáng)調(diào)了這些坑的嚴(yán)重性。甚至用了 PUA 這樣的詞來(lái)刻意強(qiáng)調(diào)自己的觀點(diǎn)。

然后又說(shuō)：React 最成功的地方在于塑造了一種幾近于 cult 的凝聚力...

好巧不巧，我剛好認(rèn)識(shí)這個(gè)單詞...

cult：邪教

如果我說(shuō)尤大有點(diǎn)上頭、激進(jìn)、極端，這應(yīng)該不算是夸張的評(píng)價(jià)吧？我記得他以前說(shuō)國(guó)內(nèi)噴子多，技術(shù)氛圍沒(méi)有國(guó)外好，他這是在干嘛？說(shuō) React 用戶是邪教、是被 PUA，這不算噴人嗎？

一、截圖中的案例

首先跟大家明確一下，截圖中的案例，完全不是 React 的坑點(diǎn)。而應(yīng)該算是 React 的優(yōu)點(diǎn)之一。

因?yàn)楫?dāng) React 中的狀態(tài)發(fā)生變化時(shí)，會(huì)導(dǎo)致組件函數(shù)重新執(zhí)行。因此，當(dāng)我們需要一個(gè)計(jì)算屬性時(shí)，不用做特別的處理和定義，正常使用即可。

function Form() {
  const [firstName, setFirstName] = useState('Taylor');
  const [lastName, setLastName] = useState('Swift');
  // ? Good: calculated during rendering
  const fullName = firstName + ' ' + lastName;
  // ...
}

例如使用 useEffect 去監(jiān)聽(tīng) state，這是冗余的操作。然后給出了錯(cuò)誤示范。

function Form() {
  const [firstName, setFirstName] = useState('Taylor');
  const [lastName, setLastName] = useState('Swift');

  // ?? Avoid: redundant state and unnecessary Effect
  const [fullName, setFullName] = useState('');
  useEffect(() => {
    setFullName(firstName + ' ' + lastName);
  }, [firstName, lastName]);
  // ...
}

所以這里只是列舉出來(lái)部分使用者的錯(cuò)誤示范而已，壓根算不上是一個(gè)坑點(diǎn)。如果這也算坑點(diǎn)，我可以在別的框架使用者的代碼里找到一大堆錯(cuò)誤示范，相互攻擊就完事了，對(duì)不？

二、React 弱侵入性

React 始終保持了對(duì) JavaScript 的弱侵入性。我認(rèn)為這是一個(gè)非常大的優(yōu)點(diǎn)。也就是說(shuō)，當(dāng)你使用 React 開(kāi)發(fā)時(shí)，實(shí)際上用到的語(yǔ)法相對(duì)比較少，就算是你學(xué)習(xí) React 也不會(huì)接觸到太多的官方 API。

弱侵入性帶來(lái)的一個(gè)巨大的好處是，我們?cè)陂_(kāi)發(fā)時(shí)可以順利植入我自己的開(kāi)發(fā)理念。比如，你覺(jué)得 React 沒(méi)有做依賴收集，是不好的，那么你就可以寫一個(gè)狀態(tài)管理去做依賴收集。Mobx 就是做這個(gè)事情的。

又或者，你覺(jué)得 React 提供的全局狀態(tài)管理不如你的心意，你就可以自己封裝一個(gè)發(fā)布訂閱，結(jié)合自定義 hook 也能方便的訂閱每一個(gè)組件。

這樣的自由度一定是會(huì)受到 React 深度使用者歡迎的。這也是 React 生態(tài)百花齊放的原因之一。不知道別人會(huì)怎么樣，但是我覺(jué)得我作為開(kāi)發(fā)者，我非常喜歡多種開(kāi)發(fā)思想相互碰撞的氛圍。

三、閉包陷阱？

有的人覺(jué)得閉包陷阱是一個(gè)坑。

實(shí)際上，這個(gè)所謂的閉包陷阱這個(gè)詞，不應(yīng)該與 React 綁定在一起。因?yàn)殚]包本身就是 JS 自身的特性。就算沒(méi)有 React，許多人也覺(jué)得閉包難以理解。而且作為前端開(kāi)發(fā)，我覺(jué)得應(yīng)該做的事情是去掌握閉包的機(jī)制和邏輯，而不是覺(jué)得閉包這個(gè)東西我理解不了，就認(rèn)為它不好。

閉包的特性讓 JS 的能力變得非常強(qiáng)大，甚至你很多時(shí)候也在不知不覺(jué)中利用閉包來(lái)達(dá)到你的目的。許多別的開(kāi)發(fā)語(yǔ)言中，也引入了閉包的機(jī)制，說(shuō)明閉包是經(jīng)歷過(guò)時(shí)間沉淀的方案。

如果一個(gè)知識(shí)點(diǎn)，理解起來(lái)比較困難，然后我們就給他戴上心智負(fù)擔(dān)重的帽子，然后把他作為一個(gè)缺點(diǎn)去不斷批評(píng)他，這算是正常的想法嗎？

四、性能不好？

Vue 重依賴收集，輕/無(wú) UI diff.

React 無(wú)依賴收集， 重 UI diff.

也就是說(shuō)，當(dāng) Vue 的數(shù)據(jù)變得龐大和復(fù)雜，他依然會(huì)有不小的性能壓力。因此 Vue 的性能優(yōu)化策略應(yīng)該是集中在如何簡(jiǎn)化數(shù)據(jù)結(jié)構(gòu)上。而 React 的優(yōu)化重點(diǎn)，在如何減輕 diff 壓力上。

誰(shuí)也不能否認(rèn)，有人能合理利用 React 的機(jī)制，編寫出來(lái)一套性能比 Vue 更好的項(xiàng)目。只是說(shuō)，做到這個(gè)事情對(duì)于 React 新玩家來(lái)說(shuō)，有點(diǎn)困難而已。

Vue 均衡性能更好，React 性能上限更高。既然各有優(yōu)劣，他只是一個(gè)不同人群的取舍問(wèn)題，但你絕對(duì)不能說(shuō)，這是 React 艱深復(fù)雜的坑點(diǎn)。

五、新手友好？

尤大一直以框架對(duì)新手友好作為一個(gè)重要的判斷標(biāo)準(zhǔn)來(lái)證明一個(gè)框架是否優(yōu)秀。但是捫心自問(wèn)，各位前端開(kāi)發(fā)們，你們真的會(huì)一直認(rèn)為一門技術(shù)對(duì)新手友好，就一定是更好的嗎？

我們?cè)谌豪飳?shí)際上還有另外一個(gè)觀點(diǎn)。

當(dāng)你還是新人的時(shí)候，你希望你學(xué)的東西簡(jiǎn)單，能快速上手。但是當(dāng)你學(xué)成之后，你又擔(dān)心他太簡(jiǎn)單，會(huì)的人太多，自己毫無(wú)競(jìng)爭(zhēng)力。

我猜測(cè)許多人的心態(tài)，會(huì)經(jīng)歷這樣的變化。所以我遇到很多 Vue 開(kāi)發(fā)者，在使用了幾年 Vue 之后，也會(huì)有很強(qiáng)烈的想法學(xué)習(xí)一下 React

實(shí)際上，在我看來(lái)，當(dāng)我們技術(shù)能力逐漸變得更強(qiáng)，我掌握的技術(shù)，能夠支撐起更高的上限，這也是一門框架不可忽視的巨大優(yōu)勢(shì)。在兩者之間取得一個(gè)平衡，我認(rèn)為這一點(diǎn)上，React 比 Vue 要做的好。

我們不能因?yàn)閷?duì)新手友好，就忽略了 React 上限更高這個(gè)事實(shí)。而且事實(shí)上，現(xiàn)在已經(jīng)有同學(xué)認(rèn)為， Vue3 的學(xué)習(xí)成本，已經(jīng)高于 react hooks。

六、Vue3 的破壞性更新

尤大說(shuō)，Vue3 的破壞性更新，是他們團(tuán)隊(duì)犯的錯(cuò)誤。但真的是決策失誤嗎？

我看未必。因?yàn)槟悴坏貌怀姓J(rèn)，事實(shí)上，你單看 Vue2 你就知道，Vue3 的出現(xiàn)，更多的是被逼無(wú)奈。

有兩個(gè)重要因素導(dǎo)致了 Vue2 承擔(dān)了巨大的壓力。

一個(gè)因素是 TS 被廣泛接納。導(dǎo)致了 Vue2 不支持 TS 成為了一個(gè)無(wú)法被反駁的缺陷。即使是現(xiàn)在的 Vue3，也依然有人覺(jué)得它對(duì) TS 的支持并沒(méi)有做到盡善盡美。

另外一個(gè)就是 React hooks 的出現(xiàn)，讓 Vue2 的差距被明顯拉開(kāi)。所以你才會(huì)看到新的 Vue 語(yǔ)法，從某種程度上，跟 React hooks 長(zhǎng)得很相似。

這兩個(gè)因素組合在一起，催生了 Vue3 長(zhǎng)成現(xiàn)在的樣子。

然而破壞性更新是有代價(jià)。現(xiàn)在依然有大量的團(tuán)隊(duì)無(wú)法成功把項(xiàng)目從 Vue2 升級(jí)到 Vue3，這才是極大的坑點(diǎn)。

六、最后

寫這篇文章，無(wú)意去過(guò)度爭(zhēng)論 Vue 和 React 到底誰(shuí)更好，因?yàn)樵趯?shí)際場(chǎng)景中做技術(shù)選型，要考慮的因素還包括技術(shù)之外的東西，這些外因甚至比技術(shù)本身更加重要。比如，我一直想去的那個(gè)團(tuán)隊(duì)，用的是 React，這樣的理由，更加能左右一個(gè)人的決定。

主要的目的是不希望被很多人認(rèn)為，React 像尤大說(shuō)的那樣，真的有很多艱深復(fù)雜的坑，我不認(rèn)同這樣的說(shuō)法。也不希望吹一下 React 就被當(dāng)成邪教。我覺(jué)得好的東西，夸一下這是很正常的事情。