2021/09/16

愛用 jQuery 又想擁抱 React 的逐步採用練習,以 DevExtreme 為例

React 逐步採用

不知道你是否和我一樣,斷斷續續學幾年的 React,總是無法順利把 React 加入到現有的 jQuery 網站中,學 jQuery 時很快樂,需要什麼功能時只需要在 script 標籤裡信手捻來 js 檔案就能快速使用,怎麼到了 React 就完全走鐘?非得使用 NodeJS 編譯才可以?React 起手式就是 create-react-app?這其中一定有什麼誤會,帶你來看看官方說法:

React 在剛推出的時候就容許被逐步採用,你可以按自己所需可多可少的採用 React。 或許你只想在現存的網頁上增加少量的互動性。採用 React component 會是個非常好的選擇。 -- React 官方手冊

按照官網裡的步驟練習結束,就如上面所說一樣,可以很順利的把 React 加入不需 NodeJS 編譯的傳統網站裡。

造成網頁變慢的元兇

會學習到可選的 JSX,JSX 很有意思,可以在 JS 裡安插類 HTML 標籤,從【逐步採用】學習到【可選:嘗試 React 與 JSX】的最後一段結論:

這種方式最適合用來學習和建立簡單的示範。然而,它會令你的網頁變慢,而且並不適合發佈到線上環境。 -- React 官方手冊:快速嘗試 JSX 章節

之所以會令你的網頁變慢,是因為它是載入 babel.js 後在網頁執行時才編譯 JS 裡的 JSX 標籤內容,每次都要花時間編譯,網頁自然快不了。

原來網頁變慢是因為動態編譯 JSX,而不是 React 慢。

JSX 最佳用法就是預先編譯,但

官方的教學在此之後就是利用 NodeJS 把 babel 安裝到現有的 WebPack 專案中,再編譯 JSX 內容成為標準 JS 內容,最後才把編譯後的成品上傳到網站執行。

等等,這樣就不是逐步採用 React 了,要加入 WebPack 就等於是大改現有網站啦!

小結:要逐步採用 React 就不能使用 JSX

原有網站在沒有 WebPack 加持下,要逐步採用 React 勢必不能使用 JSX,因使用 Babel 動態轉換 JSX 的效率不佳。

結論就是:逐步採用 React 下又不要使用 NodeJS 編譯網站,React.createElement 你只能用它了。 😁

逐步採用 React 下的難題:外掛元件

逐步採用 React 雖然可以限縮自己要學習的內容,比如我只要學 ES6 + React.State + React.Props 等,只要會 CSS,要刻什麼都很簡單。

但外掛元件呢?

我的現有網站使用了大量的 EasyUI 和 DevExtreme 元件,這些元件僅提供 NodeJS 下載安裝,並沒有發佈編譯後可使用的 JS 檔案。

解決方案就只好在 React class 裡使用 jQuery 操作外掛元件?

 

這叫 React 入門到放棄。


所幸的是,在 DevExpress 官網裡有個叫【DevExtreme Tickets】的技術小本本,它記錄許多過往使用者所提出的技術問題和解決方案,其中一個主題是:Have demo about devextreme-react without npm?

DevExtreme 官方提出【提取+橋接】的概念。撇開現有網站,另開【Webpack-React-DevExtreme】專案,使用 WebPack 提取所需的元件,如 dxButton 等,再利用 NodeJS 編譯,把提取並編譯過的 JS 檔放入現有網站,如此就能在逐步採用 React 的場合下又能享受外掛元件的開發便利性。

而外掛元件則是存放到 DOM 的 window 裡,範例程式碼如下:

DevExtreme 提取 JS

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
import * as React from "react";
import { Button } from "devextreme-react/button";

export class ButtonExample extends React.Component {
    // <Button icon="plus" text="Click me"/>
  constructor(props) {
    super(props);
  }
    render() {
        return (
          <Button {...this.props} />
        );
    }
}

const MyLib = {
    ButtonExample
}

export default MyLib

逐步採用 React 專案呼叫編譯後的 DevExtreme 元件

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!doctype html>
<html>

<head>
  <meta charset="utf-8">
    <link rel='stylesheet' type='text/css' href='https://cdn3.devexpress.com/jslib/18.1.3/css/dx.common.css' />
    <link rel='stylesheet' type='text/css' href='https://cdn3.devexpress.com/jslib/18.1.3/css/dx.material.blue.light.css' />  
  <title>DevExtreme with webpack and React example</title>
</head>

<body>
  <div class="container">
    <h1>DevExtreme with webpack and React example</h1>
    <div id="app"></div>
    <div id="app2"></div>
  </div>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <script src="js/app/bundle.js"></script>
  <script>
    const e = React.createElement
    ReactDOM.render(e(window.MyLib.ButtonExample, { icon:"plus",text:"Click me"}, null), document.getElementById("app2"))
  </script>
</body>

</html>

至於 Webpack-React-DevExtreme 原始碼,你可以在上述的票證裡找到。

結論時間

愛用 jQuery 是我個人的選擇,你也可以使用單純的 Vanilla JS,端看你的場合和上手程度來使用。

初學 React 最怕的就是在環境上的摸索上花很多時間,在不使用 npm、webpack 甚至是 Babel,現在我可以專注在學習 React 的設計上,並且和現有 HTML / JavaScript 專案進行互動,做中學所得到的回饋是最直接的。

官方不建議採用【逐步使用 React】?官方是建議使用 NPM Bundler,官方有說明建議原因,和相關資源也比較多,但有關於官方不建議【逐步使用 React】?我官方網站翻了翻,沒找到,有找到的期待你分享這類的相關資料。

React 裡要不要用 jQuery 是另一個問題,React 元件裡我是盡量用相容性比較高的 ES5/6 標準,至於 IE,我的環境不會遇到它,忽略也無仿。

在逐步採用 React 又要使用外掛元件,不再是魚和熊掌的問題,使用一個簡單 WebPack 專案 + 一次編譯,就能把所需的外掛元件放到 window 中,完全滿足「我全都要」的需求,實在是太棒啦!

如果有其它的外掛元件,我想也可以參照此方法把外掛元件產出。

底下是使用 Vanilla JS + React 使用 DevExtreme 小部件的範例。

和你分享 😉

SEE ALSO

沒有留言:

張貼留言