建站
咨詢
售后
建站咨詢
新聞中心
大家好，我卡頌。
為龍灣等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計(jì)制作服務(wù)，及龍灣網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為成都做網(wǎng)站、成都網(wǎng)站建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)、龍灣網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長期合作。這樣，我們也可以走得更遠(yuǎn)！
逞著對React內(nèi)部運(yùn)行流程還記得住，業(yè)余時(shí)間嘗試復(fù)刻一個(gè)React —— big-react[1]。
即然是復(fù)刻一個(gè)React，那肯定得跑通部分官方的測試用例。
在跑一個(gè)用例時(shí)遇到個(gè)很有意思的問題，以下是排查過程。
問題現(xiàn)象
以下是這個(gè)用例的內(nèi)容：
it('uses the fallback value when in an environment without Symbol', () => {
expect(().$$typeof).toBe(0xeac7);
});他測試的是在「不支持Symbol的環(huán)境」，jsx的內(nèi)部屬性$$typeof是否正確。
我們知道，jsx僅僅是JS的語法糖，在編譯時(shí)會(huì)被編譯成函數(shù)調(diào)用，比如：
// 編譯前
// 編譯后 React17之前
React.createElement('div');
// 編譯后 React17之后
jsxRuntime.jsx('div');
在React.createElement（或jsxRuntime.jsx）方法的實(shí)現(xiàn)中，最終會(huì)返回如下數(shù)據(jù)結(jié)構(gòu)：
const element: ReactElement = {
$$typeof: REACT_ELEMENT_TYPE,
type,
key,
ref,
props
};其中$$typeof屬性用于區(qū)分「jsx對象的類型」，比如REACT_ELEMENT_TYPE代表這個(gè)jsx對象是一個(gè)React Element。
在支持Symbol的環(huán)境，$$typeof對應(yīng)一個(gè)唯一的symbol。在不支持的環(huán)境，對應(yīng)一個(gè)16進(jìn)制數(shù)字。
比如REACT_ELEMENT_TYPE的定義如下：
const supportSymbol = typeof Symbol === 'function' && Symbol.for;
export const REACT_ELEMENT_TYPE = supportSymbol
? Symbol.for('react.element')
: 0xeac7;
回到我們的測試用例，他的測試意圖就很明顯了：在不支持Symbol的環(huán)境，「div對應(yīng)jsx對象」的$$typeof屬性應(yīng)該返回?cái)?shù)字0xeac7。
it('uses the fallback value when in an environment without Symbol', () => {
expect(().$$typeof).toBe(0xeac7);
});那么如何制造一個(gè)「不支持Symbol的環(huán)境」呢？
很簡單，在所有用例執(zhí)行前的beforeEach鉤子函數(shù)（jest提供的）中將global.Symbol置為undefined：
beforeEach(() => {
jest.resetModules();
originalSymbol = global.Symbol;
// 制造不支持Symbol的環(huán)境
global.Symbol = undefined;
React = require('react');
ReactDOM = require('react-dom');
ReactTestUtils = require('react-dom/test-utils');
});當(dāng)引入react、react-dom時(shí)，其內(nèi)部執(zhí)行時(shí)global.Symbol === undefined。
這就模擬了「不支持Symbol的環(huán)境」。
但是這個(gè)用例卻掛了：
上述代碼應(yīng)該是沒問題的，畢竟是React官方會(huì)跑的用例。那么問題出在哪兒呢？
babel的鍋
在React17發(fā)布時(shí)，帶來了全新的 JSX 轉(zhuǎn)換[2]。
在17之前，jsx會(huì)編譯為React.createElement，17之后會(huì)編譯為jsxRuntime.jsx。
同時(shí)會(huì)在模塊頂部引入如下語句：
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";上述被引入的語句的執(zhí)行先于下述語句：
originalSymbol = global.Symbol;
global.Symbol = undefined;
所以在語句執(zhí)行時(shí)，環(huán)境中還存在global.Symbol，就造成開篇提到的問題。
那為什么React官方跑用例時(shí)沒有問題呢？
答案是：React跑用例時(shí)會(huì)將jsx編譯為React.createElement。
這樣不會(huì)在模塊頂部插入新的引入語句。
當(dāng)引入React時(shí)，環(huán)境中已經(jīng)不存在global.Symbol了：
originalSymbol = global.Symbol;
global.Symbol = undefined;
React = require('react');
ReactDOM = require('react-dom');
ReactTestUtils = require('react-dom/test-utils');
總結(jié)
由于編譯在內(nèi)存中進(jìn)行，不太好排查編譯后代碼。所以如果對React各方面特性了解不深的話，這個(gè)問題真不太好排查。
當(dāng)前big-react[3]代碼量還比較少。
參考資料
[1]big-react:https://github.com/BetaSu/big-react。
[2]全新的 JSX 轉(zhuǎn)換:https://zh-hans.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html。
[3]big-react:https://github.com/BetaSu/big-react。
新聞名稱：實(shí)現(xiàn)React過程中一次有趣的問題排查經(jīng)歷
標(biāo)題路徑：http://www.5511xx.com/article/dhpedjo.html
