React實時預(yù)覽react-live源碼解析

更新時間：2022年08月15日 11:51:42 作者：嘿嘿Z

這篇文章主要為大家介紹了React實時預(yù)覽react-live源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

引言

react-live 是一個 react 的實時編輯器，可直接編輯 react 代碼，并實時預(yù)覽。可以看下官方的預(yù)覽圖：

src
├── components
│   ├── Editor
│   │   └── index.js
│   └── Live
│       ├── LiveContext.js
│       ├── LiveEditor.js
│       ├── LiveError.js
│       ├── LivePreview.js
│       ├── LiveProvider.js
│       └── LiveProvider.test.js
├── constants
│   └── theme.js
├── hoc
│   └── withLive.js
├── index.js
└── utils
    ├── test
    │   ├── errorBoundary.test.js
    │   ├── renderer.js
    │   └── transpile.test.js
    └── transpile
        ├── errorBoundary.js
        ├── evalCode.js
        ├── index.js
        └── transform.js

源碼解讀

輸入內(nèi)容

先看下導(dǎo)出內(nèi)容，包括：

Editor：編輯器
LiveProvider：實時編輯環(huán)境的 Provider，Context.Provider
LiveEditor：實時編輯上下文的編輯器
LiveError：實時編輯上下文的報錯
LivePreview：實時編輯上下文的預(yù)覽
LiveContext：實時編輯的 Context
withLive：實時編輯上下文的 HOC

文件結(jié)構(gòu)和組件拆分一目了然。

Provider

先看下 Provider，它提供了以下內(nèi)容：

element：實時編輯輸出的元素
error：當(dāng)前的報錯信息
code：當(dāng)前編輯的代碼
language：代碼語言
theme：代碼編輯器主題
disabled：是否禁用
onError：報錯的回調(diào)
onChange：代碼編輯時的回調(diào)

Provider 用來收集代碼變更，然后通過 transpileAsync 將代碼編譯生成組件實例：

function transpileAsync(newCode) {
    const errorCallback = error => {
        setState({ error: error.toString(), element: undefined });
    };
    try {
        const transformResult = transformCode ? transformCode(newCode) : newCode;
        return Promise.resolve(transformResult)
            .then(transformedCode => {
                const renderElement = element => setState({ error: undefined, element });
                // Transpilation arguments
                const input = {
                    code: transformedCode,
                    scope
                };
                if (noInline) {
                    setState({ error: undefined, element: null }); // Reset output for async (no inline) evaluation
                    renderElementAsync(input, renderElement, errorCallback);
                } else {
                    renderElement(generateElement(input, errorCallback));
                }
            })
            .catch(errorCallback);
    } catch (e) {
        errorCallback(e);
        return Promise.resolve();
    }
}

renderElementAsync 可以先無視，主要是用于 noInline 模式下調(diào)用 render 進行渲染，邏輯與非 noInline 模式下類似。

generateElement

實時預(yù)覽的核心部分就在這里了，它會將代碼先進行編譯，然后執(zhí)行代碼，取得返回值。

const generateElement = ({ code = '', scope = {} }, errorCallback) => {
    // NOTE: Remove trailing semicolon to get an actual expression.
    const codeTrimmed = code.trim().replace(/;$/, '');
    // NOTE: Workaround for classes and arrow functions.
    const transformed = transform(`return (${codeTrimmed})`).trim();
    return errorBoundary(evalCode(transformed, { React, ...scope }), errorCallback);
};

代碼如上，它會先去掉頭尾空白，然后去掉結(jié)尾的分號，這一步是為了下一步的 return 拼接能夠正常返回。通過 return 拼接讓 react-live 能夠支持下述語法直接渲染：

直接寫一個匿名函數(shù)：

() => <h3>So functional. Much wow!</h3>;

直接寫 jsx：

<h3>Hello World!</h3>

單 class 組件：

class Comp extends React.Component {
    render() {
        return <center>component</center>;
    }
}

不過也導(dǎo)致了一定的學(xué)習(xí)成本，如果寫多個函數(shù)，多個組件，嵌套等情況下會讓人覺得語法很奇怪。

transform 就是將代碼通過 sucrase 進行轉(zhuǎn)譯，處理 jsx、class 這些語法，可以理解為通過 babel 轉(zhuǎn)譯。

早期的 react-live 通過 buble 進行轉(zhuǎn)譯，能夠支持 jsx 注釋，現(xiàn)在由于 sucrase 不支持 jsx 注釋，所以新版無法使用 jsx 注釋來控制 jsx 渲染引擎。

/** @jsx mdx */
// 新版上述注釋會失效

隨后將轉(zhuǎn)譯的代碼通過 evalCode 轉(zhuǎn)換為 React element，此處會將 scope 和 React 傳入 evalCode 中。

const evalCode = (code, scope) => {
    const scopeKeys = Object.keys(scope);
    const scopeValues = scopeKeys.map(key => scope[key]);
    return new Function(...scopeKeys, code)(...scopeValues);
};

evalCode 中使用 new Function 來構(gòu)造函數(shù)，scope 就是在這里作為參數(shù)進行注入。如果對 new Function 不理解的可以看我之前一篇關(guān)于 JS 沙箱的文章。

errorBoundary 則是一個簡單的 HOC，用來捕獲生成的組件運行時的錯誤信息，通過 errorCallback 拋出。

const errorBoundary = (Element, errorCallback) => {
    return class ErrorBoundary extends Component {
        componentDidCatch(error) {
            errorCallback(error);
        }
        render() {
            return typeof Element === 'function' ? <Element /> : React.isValidElement(Element) ? Element : null;
        }
    };
};

上面就是 react-live 能夠?qū)崟r預(yù)覽的核心代碼了。下面再看下其它幾個組件，都比較簡單。

其他組件

LivePreview 會接受 Provider 中的 Element，將其渲染。

LiveError 接受 Provider 中的 error 進行渲染。

LiveEditor 則是接收 Provider 的 code、language、theme、disabled、onChange，提供編輯功能。

它的編輯器則是通過 useEditable 編輯，Prism 進行代碼高亮。

總結(jié)

上述便是 react-live 的核心代碼，內(nèi)容并不多，通過 sucrase 實時編譯代碼，然后通過 new Function 構(gòu)造函數(shù)注入 scope 來生成 element 實現(xiàn)實時預(yù)覽，設(shè)計上通過拆離 Editor、Error、Preview 三部分，可以讓使用者自由組合組件的位置、樣式。

以上就是React實時預(yù)覽react-live源碼解析的詳細(xì)內(nèi)容，更多關(guān)于react live實時預(yù)覽的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: