實現(xiàn)React過程中一次有趣的問題排查經(jīng)歷

大家好，我卡頌。

最近關(guān)于React的新書交稿了（預(yù)計年底出版），時間比較多。

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

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

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

問題現(xiàn)象
以下是這個用例的內(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ù)調(diào)用，比如：

// 編譯前
<div />

// 編譯后 React17之前
React.createElement('div');

// 編譯后 React17之后
jsxRuntime.jsx('div');
在React.createElement（或jsxRuntime.jsx）方法的實現(xiàn)中，最終會返回如下數(shù)據(jù)結(jié)構(gòu)：

const element: ReactElement = {
  $$typeof: REACT_ELEMENT_TYPE,
  type,
  key,
  ref,
  props
};
其中$$typeof屬性用于區(qū)分「jsx對象的類型」，比如REACT_ELEMENT_TYPE代表這個jsx對象是一個React Element。

在支持Symbol的環(huán)境，$$typeof對應(yīng)一個唯一的symbol。在不支持的環(huán)境，對應(yīng)一個16進制數(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)該返回數(shù)字0xeac7。

it('uses the fallback value when in an environment without Symbol', () => {
  expect((<div />).$$typeof).toBe(0xeac7);
 });
那么如何制造一個「不支持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');
 });
當引入react、react-dom時，其內(nèi)部執(zhí)行時global.Symbol === undefined。

這就模擬了「不支持Symbol的環(huán)境」。

但是這個用例卻掛了：





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

babel的鍋
在React17發(fā)布時，帶來了全新的 JSX 轉(zhuǎn)換[2]。

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

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

import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
上述被引入的語句的執(zhí)行先于下述語句：

originalSymbol = global.Symbol;
global.Symbol = undefined;
所以在語句執(zhí)行時，環(huán)境中還存在global.Symbol，就造成開篇提到的問題。

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

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

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

當引入React時，環(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)存中進行，不太好排查編譯后代碼。所以如果對React各方面特性了解不深的話，這個問題真不太好排查。

當前big-react[3]代碼量還比較少，對從0實現(xiàn)React感興趣的朋友可以關(guān)注下，給個star哦～

參考資料
[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

作者：卡頌


歡迎關(guān)注微信公眾號 ：魔術(shù)師卡頌