大家好，我卡頌。

逞著對React內部運行流程還記得住，業余時間嘗試復刻一個React —— big-react[1]。

即然是復刻一個React，那肯定得跑通部分官方的測試用例。

在跑一個用例時遇到個很有意思的問題，以下是排查過程。

問題現象

以下是這個用例的內容：

it('uses the fallback value when in an environment without Symbol', () => {
  expect((<div />).$$typeof).toBe(0xeac7);
 });

他測試的是在「不支持Symbol的環境」，jsx的內部屬性$$typeof是否正確。

我們知道，jsx僅僅是JS的語法糖，在編譯時會被編譯成函數調用，比如：

// 編譯前
<div />
// 編譯后 React17之前
React.createElement('div');
// 編譯后 React17之后
jsxRuntime.jsx('div');

在React.createElement（或jsxRuntime.jsx）方法的實現中，最終會返回如下數據結構：

const element: ReactElement = {
  $$typeof: REACT_ELEMENT_TYPE,
  type,
  key,
  ref,
  props
};

其中$$typeof屬性用于區分「jsx對象的類型」，比如REACT_ELEMENT_TYPE代表這個jsx對象是一個React Element。

在支持Symbol的環境，$$typeof對應一個唯一的symbol。在不支持的環境，對應一個16進制數字。

比如REACT_ELEMENT_TYPE的定義如下：

const supportSymbol = typeof Symbol === 'function' && Symbol.for;
export const REACT_ELEMENT_TYPE = supportSymbol
 ? Symbol.for('react.element')
 : 0xeac7;

回到我們的測試用例，他的測試意圖就很明顯了：在不支持Symbol的環境，「div對應jsx對象」的$$typeof屬性應該返回數字0xeac7。

it('uses the fallback value when in an environment without Symbol', () => {
  expect((<div />).$$typeof).toBe(0xeac7);
 });

那么如何制造一個「不支持Symbol的環境」呢？

很簡單，在所有用例執行前的beforeEach鉤子函數（jest提供的）中將global.Symbol置為undefined：

beforeEach(() => {
  jest.resetModules();
  originalSymbol = global.Symbol;
    // 制造不支持Symbol的環境
  global.Symbol = undefined;
  React = require('react');
  ReactDOM = require('react-dom');
  ReactTestUtils = require('react-dom/test-utils');
 });

當引入react、react-dom時，其內部執行時global.Symbol === undefined。

這就模擬了「不支持Symbol的環境」。

但是這個用例卻掛了：

上述代碼應該是沒問題的，畢竟是React官方會跑的用例。那么問題出在哪兒呢？

babel的鍋

在React17發布時，帶來了全新的 JSX 轉換[2]。

在17之前，jsx會編譯為React.createElement，17之后會編譯為jsxRuntime.jsx。

同時會在模塊頂部引入如下語句：

import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";

上述被引入的語句的執行先于下述語句：

originalSymbol = global.Symbol;
global.Symbol = undefined;

所以在語句執行時，環境中還存在global.Symbol，就造成開篇提到的問題。

那為什么React官方跑用例時沒有問題呢？

答案是：React跑用例時會將jsx編譯為React.createElement。

這樣不會在模塊頂部插入新的引入語句。

當引入React時，環境中已經不存在global.Symbol了：

originalSymbol = global.Symbol;
global.Symbol = undefined;
React = require('react');
ReactDOM = require('react-dom');
ReactTestUtils = require('react-dom/test-utils');

總結

由于編譯在內存中進行，不太好排查編譯后代碼。所以如果對React各方面特性了解不深的話，這個問題真不太好排查。

當前big-react[3]代碼量還比較少。

參考資料

[1]big-react:https://github.com/BetaSu/big-react。

[2]全新的 JSX 轉換:https://zh-hans.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html。

[3]big-react:https://github.com/BetaSu/big-react。