React：不要?jiǎng)樱駝t你會(huì)被炒魷魚(yú)

作者：卡頌 2022-07-11 06:56:00

本文我們介紹react與react-dom?中神秘的內(nèi)部變量__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED的作用。

大家好，我卡頌。

不知道大家在用React開(kāi)發(fā)時(shí)，有沒(méi)有注意到react與react-dom這兩個(gè)包中有個(gè)很奇葩的屬性__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED：

直譯過(guò)來(lái)就是「內(nèi)部神秘屬性，不要亂用！否則你會(huì)被炒魷魚(yú)」。

為什么會(huì)有個(gè)這么唬人的屬性？今天我們來(lái)聊聊。

我們?cè)陧?xiàng)目中習(xí)慣使用如下語(yǔ)句引入Hook：

import {useState} from 'react';

這是不是意味著所有Hook?的具體實(shí)現(xiàn)都在react這個(gè)包中？實(shí)際不是的。

所有Hook?的具體實(shí)現(xiàn)在ReactFiberHooks.new.js?方法中，該方法來(lái)自于react-reconciler這個(gè)包。

那為什么我們項(xiàng)目中從來(lái)沒(méi)有主動(dòng)引入過(guò)這個(gè)包呢？因?yàn)閞eact-reconciler?中被使用的部分，被打包進(jìn)react-dom中了。

簡(jiǎn)單來(lái)說(shuō)，React為了實(shí)現(xiàn)跨平臺(tái)渲染，采用的是「一個(gè)主模塊」 + 「一個(gè)渲染器」的模式。

其中「主模塊」就是react包，他提供了所有通用方法。

「渲染器」針對(duì)宿主環(huán)境不同而不同，比如：

渲染器除了「宿主環(huán)境相關(guān)的代碼」外，還有大量通用邏輯（比如Diff算法）。

所以可以認(rèn)為，react-dom是由如下多個(gè)包中「被使用的部分」打包而成：

shared，一個(gè)存放通用方法的包。
react-reconciler，提供包括Hooks的實(shí)現(xiàn)、Diff算法、優(yōu)先級(jí)調(diào)度等更新相關(guān)功能。
react-dom，提供宿主環(huán)境方法，比如「DOM的增/移動(dòng)/刪/改」。
等等其他包。

這也是為什么宿主環(huán)境千差萬(wàn)別，但都能通過(guò)執(zhí)行useState改變狀態(tài)，觸發(fā)視圖更新。

原因在于 —— 「Hooks的實(shí)現(xiàn)」與「宿主環(huán)境操作視圖的方法」被打包進(jìn)了同一個(gè)包中。

既然「Hooks的實(shí)現(xiàn)」被打包進(jìn)react-dom?（或其他宿主環(huán)境對(duì)應(yīng)的包）中，那如何做到最終使用時(shí)是從react中導(dǎo)出的呢？就像這樣：

// 而不是 from 'react-dom'
import {useState} from 'react';

這就用到了開(kāi)篇提到的變量__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED。

可以認(rèn)為，當(dāng)React?團(tuán)隊(duì)希望在react與「宿主環(huán)境對(duì)應(yīng)的包」之間共享數(shù)據(jù)時(shí)，就會(huì)把他保存在這個(gè)神秘的內(nèi)部變量中。

比如上文提到的，「Hook的具體實(shí)現(xiàn)」。

再比如，object.assign?方法的polyfill?，在react?與react-dom?中都會(huì)用到，但如果兩個(gè)包中分別引入，再分別打包，那么polyfill?的代碼會(huì)重復(fù)出現(xiàn)在react?與react-dom兩個(gè)包中。

為了減少重復(fù)代碼，react?會(huì)引入object.assign?方法的polyfill，再將它保存在神秘的內(nèi)部變量中。

react?作為react-dom的peerDependencies?，當(dāng)項(xiàng)目中引入這兩個(gè)包后，react-dom?內(nèi)部使用的object.assign?實(shí)際來(lái)自react：

// react-dom包內(nèi)部
const react = require('react');
const { assign } = react.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;

了解了神秘的內(nèi)部變量的作用，我們?cè)賮?lái)看看這種實(shí)現(xiàn)會(huì)造成的問(wèn)題。

假設(shè)我們有2個(gè)項(xiàng)目：

B安裝依賴(lài)后，A會(huì)出現(xiàn)在B的node_modules中。

為了調(diào)試方便，我們用npm link功能將B中依賴(lài)的A由「B的node_modules中的A」改為「組件庫(kù)項(xiàng)目A」，

當(dāng)npm link?后，B中業(yè)務(wù)代碼使用的useState來(lái)自于「B的node_modules中的react」。

而B(niǎo)中引入的組件庫(kù)A的組件中使用的useState來(lái)自于「A的node_modules中的react」。

不同的react?對(duì)應(yīng)不同的__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED?，最終對(duì)應(yīng)不同的react-dom。

這就會(huì)造成報(bào)錯(cuò)。

解決辦法是在項(xiàng)目中為react?增加別名（alias），使項(xiàng)目中所有用到react?的地方都指向同一個(gè)react。

本文我們了解了react與react-dom?中神秘的內(nèi)部變量__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED的作用。

他能夠在這兩個(gè)包之間傳遞共享的數(shù)據(jù)。

需要注意的一點(diǎn)是，如果你也想用這種方式在兩個(gè)包之間共享數(shù)據(jù)，需要將其中一個(gè)包設(shè)為另一個(gè)包的peerDependencies。

否則，在打包時(shí)，「被共享的數(shù)據(jù)」只會(huì)在兩個(gè)包中分別存在一份。

責(zé)任編輯：姜華來(lái)源：魔術(shù)師卡頌