尤雨溪再噴 React，這波我要反駁一下

作者：這波能反殺丶 2024-03-27 08:21:06

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

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

作為一個(gè) React 深度使用者，覺得不應(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ù)氛圍沒有國(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)聽 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 開發(fā)時(shí)，實(shí)際上用到的語(yǔ)法相對(duì)比較少，就算是你學(xué)習(xí) React 也不會(huì)接觸到太多的官方 API。

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

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

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

三、閉包陷阱？

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

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

閉包的特性讓 JS 的能力變得非常強(qiáng)大，甚至你很多時(shí)候也在不知不覺中利用閉包來(lái)達(dá)到你的目的。許多別的開發(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)，各位前端開發(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 開發(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。