大家好，我卡頌。

逞著對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((<div />).$$typeof).toBe(0xeac7);
 });

他測試的是在「不支持Symbol的環(huán)境」，jsx的內(nèi)部屬性$$typeof是否正確。

我們知道，jsx僅僅是JS的語法糖，在編譯時(shí)會(huì)被編譯成函數(shù)調(diào)用，比如：

// 編譯前
<div />
// 編譯后 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((<div />).$$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。