<dd id="3pk9i"><optgroup id="3pk9i"><video id="3pk9i"></video></optgroup></dd>
<rp id="3pk9i"></rp>

<dd id="3pk9i"><track id="3pk9i"></track></dd>
      1. <th id="3pk9i"></th>
        1. <ol id="3pk9i"><ruby id="3pk9i"></ruby></ol>

        2. 小程序能用react嗎-當前熱點

          來源:php中文網 | 2022-12-29 10:56:41 |

          本教程操作環境:Windows10系統、react18.0.0版、Dell G3電腦。

          小程序能用react嗎?

          能。


          【資料圖】

          在微信小程序中直接運行React組件

          在研究跨端開發時,我的一個重要目標,是可以讓react組件跑在微信小程序中。在這個過程中,我探索了微信小程序的架構,并且引發了很多思考。而作為跨端開發,實際上很難做到 write once,run anywhere,因為每個平臺所提供的能力是不一樣的,例如微信小程序提供了原生的能力,例如調起攝像頭或其他需要原生環境支持的能力,在微信小程序中開發雖然也是在webview中開展,但是,卻需要一些原生的思維。所以,要做到 write once 就必須有一些限制,這些限制注定了我們無法完全利用小程序的能力,僅僅只用到一些布局的能力而已。所以,奉勸各位,在做跨端開發時,要有個心理準備。但如果跳出跨端開發,我現在只開發小程序,那我能否用我熟悉的react來開發呢?甚至,能否用我開發的nautil框架來開發呢?答案是可以的,本文將帶你一步一步實現自己的react小程序開發之路,幫助你在某些特定的場景下,完成react項目往小程序遷移的目標。

          小程序運行React的方案對比

          目前業界能夠比較好支持小程序(沒有特別注明的情況下,小程序特指微信小程序)運行React組件的,有3套方案,分別是京東凹凸實驗室的taro,螞蟻金服某團隊(未找到具體團隊名)的remax,微信某團隊的kbone。

          Taro

          編譯,新版本也基于運行時

          解析為wxml+js

          老牌,不斷發展,全平臺支持,持續迭代

          Remax

          運行時,帶編譯宏

          基于reconciler

          最優雅,增量更新

          不夠成熟,后續發展未知

          Kbone

          運行時,依賴webpack

          自己實現一套DOM API

          可兼容vue,甚至任意基于DOM渲染的框架

          性能問題(全量檢查),幾乎停更

          3套方案各有不同,而且在各自的思路上都是獨樹一幟。就我個人而言,如果不考慮跨端開發,自己實現一套DOM API這種方案是非常有價值的,因為DOM接口是HTML標準,你不需要自己去發明一套標準出來,而一旦實現了DOM API,那么所以其他基于DOM實現的應用理論上都支持在這上面跑。但是,它的不足就是你每換一個平臺,就要針對這個平臺去實現一套DOM API,這個成本是非常大的,因為DOM接口標準極其龐大,實現的時候也很容易出bug。在我看來,最優雅的實現還是Remax的那種思路,基于react-reconciler做一個渲染器,這個渲染器將react組件實例抽象為一個統一的DSL,在不同的平臺上,去解析渲染這個DSL。

          但是remax迭代更新之后,它開始強依賴自己的編譯工具,這直接導致我放棄在項目中使用它。因為對于我們自己的項目而言,我們其實有可能不需要它的全部,我們只是使用react來完成我們整個小程序中的某些部分(比如有些已經用react寫好的h5我們想要渲染到小程序,其他部分我們還是在原來的項目中跑)。如果對它的編譯工具有依賴,我們就不得不把整個項目遷移到它的編譯工具,那我還不如直接使用taro這個老牌比較穩定的工具。

          整體實現思路

          經過一番研究之后,我決定采用remax的思路,也就是基于react-reconciler實現一個渲染器,生成一個DSL,再創建一個小程序組件,去解析和渲染這個DSL。在完成實現之后,我把所有這些邏輯構建為最終產物,并以npm的形式發布產物,對于小程序開發者而言,只需要npm安裝之后,執行開發者工具中的構建npm即可,之后在自己的頁面中引入這個包,利用api即可完成開發,而不在需要使用另外的編譯工具。

          這一方案的最大好處是,對編譯工具的弱(無)依賴,這樣就可以讓我們的這套方案可以在任意的項目中去跑,而不需要額外引入編譯工具切換工具棧。另外,因為reconciler的部分已經打包進npm包了,所以它是一個可以獨立運行的模塊,所以,你甚至可以在mpvue等vue風格或小程序原生風格項目中使用這個npm包來渲染react的組件。

          微信小程序中運行react組件的思路

          如上圖所示,我們將一個react組件通過基于react-reconciler的渲染器,創建了一個DSL的純對象(包含回調函數),我們在page的js文件中,通過this.setData把這個對象發送給渲染線程,在wxml中使用了我們提供的一個自引用嵌套的組件對DSL進行渲染。這里需要注意一個點,react-reconciler會在組件更新的時候,觸發對應的鉤子,此時,會再次生成新的DSL,并再次通過this.setData發送渲染。所以,這個渲染器和單純使用createElement的結果是不同的,渲染器支持hooks等react內置的功能。

          接下來,我將對其中的具體細節進行講解,以讓你盡可能自己可以手寫出本文所闡述的代碼,以讓你在自己的項目中可以實現本文一致的效果。你可以克隆這個倉庫到本地,運行效果看看,研究它的整個實現過程。

          將react組件渲染為純JS對象

          react的渲染器本質上是一個基于react調度系統的副作用執行器,副作用的結果在web環境下就是DOM的操作,在native環境下就是調用渲染引擎光柵化圖形,在art環境下就是調用聲卡播放聲音,而在我們這次的計劃中,我們需要渲染器生成一個純js對象,以方便交給小程序在小程序的兩個線程之間作為消息體進行傳遞,并基于這個對象在小程序中渲染界面。

          有同學對我發出疑問:jsx編譯之后React.createElement的執行結果不就是純JS的對象么?這里需要了解react的本質。react的組件,實際上為react提供了一套描述系統,它描述了react所表達的具體對象的結構。但是,這個描述是抽象的,只有當你把它實例化,運行起來時,它才有意義。我們在組件中所做的描述,可不單單只有jsx的部分,它還包括業務和程序層面的邏輯。比如很多場景下,我們需要根據組件狀態來決定返回那一部分jsx,從而渲染不同的界面。而這部分內容,需要依賴一個環境來執行,也就是react渲染器。

          在以前,我們只能模擬react-dom,按照它的運行邏輯,自己手寫一個渲染器。而現在,react把它的調度器專門做了一個庫,react-reconciler,幫助開發者快速接入react的調度系統,從而可以構建自己的渲染器。這里有一個視頻(自備梯子),介紹了react-reconciler的基本用法和使用效果。

          import Reconciler from "react-reconciler"const container = {}const HostConfig = {  // ... 極其復雜的一個配置}const reconcilerInstance = Reconciler(HostConfig)let rootContainerInstance = nullexport function render(element, { mounted, updated, created }) {  if (!rootContainerInstance) {    rootContainerInstance = reconcilerInstance.createContainer(container, false, false)  }  return reconcilerInstance.updateContainer(element, rootContainerInstance, null, () => {    notify = { mounted, updated, created }    created && created(container)    mounted(container.data)  })}

          上面代碼中,沒有給出的HostConfig的具體內容是關鍵,它用于配制一個Reconciler,從代碼的角度,它就是一個鉤子函數的集合,我們需要在每個鉤子函數內部寫一些副作用來操作container,你可以看到,在不同的時刻,我們傳入的created, mounted, updated會被調用,而它們接收被操作過的container,從而讓我們獲得這個js對象(container上還有一些函數,但我們可以不用理會,因為this.setData會自動清除這些函數)。

          由于這一配置內容太過復雜,要講解清楚需要花費比較大的篇幅,所以我直接把源碼地址貼在這里,你可以通過閱讀源碼來了解它都有哪些配置項,并且你可以把這部分代碼拆分出來后,運行一個自己的組件,通過console.log來觀察它們被調用的時機以及順序。

          總而言之,這些接口都是知識層面的,不是什么復雜的邏輯,了解每一個配置項的作用和執行時機之后,你就能寫出自己的渲染器。理論上,它沒有什么難度。

          基于react-reconciler,我在react運行時的每一個環節都做了一些副作用操作,這些副作用的本質,就是修改一個純js對象,當react被運行起來時,它會經歷一個生命周期,這在我的一個視頻中有講到react的生命周期的具體過程。你也可以關注我的個人微信公眾號 wwwtangshuangnet 和我討論相關的問題。在每一個生命周期節點上,調度器就會執行一個副作用,即修改我提供的那個純js對象。

          我提供了兩個方法,用于在小程序的渲染器中,獲得生成好的js對象。得到這個js對象之后,就可以調用小程序的this.setData,把這個對象發送到渲染線程進行渲染。

          利用react渲染器得到的純對象上存在一些函數,調用這些函數會觸發它們對應的邏輯(比如調用setState觸發hooks狀態更新),從而觸發調度器中的鉤子函數執行,container對象再次被修改,updated被再次調用,this.setData被再次執行,這樣,就實現了真正的react運行時在小程序中的植入。

          嵌套遞歸自引用組件

          渲染線程接收到this.setData發送過來的js對象后,如何將這個對象作為布局的信息,渲染到界面上呢?由于小程序的特殊架構,它為了安全起見,渲染線程中無法執行可操作界面的腳本,所有的渲染,都得依靠模板語法和少量的wxs腳本。所以,要怎么做呢?

          小程序提供了自定義組件的功能,在app.json或對應的page.json中,通過usingComponents來指定一個路徑,從而可以在wxml中使用這個組件。而有趣的地方在于,組件本身也可以在組件自己的component.json中使用usingComponents這個配置,而這個配置的內容,可以直接指向自己,例如,我在自己的組件中,這樣自引用:

          // dynamic.json{  "usingComponents": {    "dynamic": "./dynamic"  }}

          自己引用自己作為組件之后,在其wxml中,我們就可以使用組件自己去渲染子級數據,即一種嵌套遞歸的形式進行渲染。

          我規定了一種特別的數據結構,大致如下:

          {  type: "view",  props: {    class: "shadow-component",    bindtap: (e) => { ... },  },  children: [    {      type: "view",      props: {},      children: [        ...      ],    },  ],}

          模板中,通過對type的判斷,選擇不同的模板代碼進行渲染。

          <block wx:if="{{ type === "view" }}">  <view class="{{ props.class }}" bindtap="bindtap">    <block wx:if="{{ children.length }}" wx:for="{{ children }}">      <dynamic data="{{ item }}" /> <!-- 嵌套遞歸 -->    </block>  </view></block>

          在wxml中把所有組件通過這種形式枚舉出來之后,這個組件就能按照上述的數據結構遞歸渲染出整個結構。

          當然,這里還需要處理一些細節,例如響應data的變化,事件響應函數等,你可以通過源碼了解具體要怎么處理。另外,微信小程序this.setData限制在1M以內,我雖然還沒有嘗試過很大的數據,但是,這個限制肯定在將來是一個風險點,我現在還沒有解決,還在思考應該怎么最小化更新粒度。

          不支持直接JSX的變通方法

          小程序的編譯,沒有辦法自己配置支持新語法,所以如果我們在小程序代碼中使用jsx,就必須先走一遍自己的編譯邏輯。有兩種解決辦法,一種是不使用jsx語法,而是使用hyperscript標記語法,比如:

          import { createElement as h } from "react"function Some() {  return h(    "view",    { class: "some-component" },    h(      "view",      { class: "sub-view" },      "一段文字",    ),    "一段文字",  )}

          這樣的寫法顯然沒有直接寫jsx來的方便,但是閱讀上沒有什么障礙,且不需要將jsx編譯的過程。

          另一種辦法是走一遍編譯,在小程序的頁面目錄下,創建一個頁面同名的.jsx文件,再利用bebel將它編譯為.js文件。但是這樣的話,你需要在發布小程序的時候,忽略掉所有的.jsx文件。另外,還有一個坑是,小程序的編譯不提供process.env,所以編譯react的結果用的時候會報錯。解決辦法是把react的cjs/react.production.min.js作為react的入口文件,通過小程序的構建npm的相關配置邏輯,指定react構建的文件。

          結語

          本文詳細講解了如何在微信小程序中直接運行react組件的思路,同時,你可以參考這個倉庫,運行效果看看,研究它的整個實現過程??偨Y而言,這個方法分為3個部分:1. 基于react-reconciler實現一個把react組件渲染為純js對象的渲染器,之所以需要純js對象,是因為小程序發送到渲染線程的數據必須是純對象。2. 利用小程序的自定義組件,實現自引用嵌套遞歸的組件,用于利用上一步得到的js對象渲染成真正的界面。3. 解決jsx問題,將前兩步的結果,在page中進行實施,以真正完成在小程序中渲染react組件的效果。當然,本文闡述過程,僅僅提供了這套思路,在真正用到項目中時,使用過程中肯定還會遇到一些坑,僅能作為原有小程序開發項目的補充手段,比如之前寫好的react組件不想重新寫成小程序版本,那么就可以使用這個方法,同時在渲染組件的地方,把DOM的標簽,映射為小程序的標簽,就可以在一定程度上解決原有react代碼復用的問題。如果你在實操過程中遇到什么問題,歡迎在本文下方留言討論~

          文中鏈接:Nautil框架:https://github.com/tangshuang/nautil演示倉庫:https://gitee.com/frustigor/wechat-dynamic-componentBuilding a Custom React Rendere: https://www.youtube.com/watch?v=CGpMlWVcHok

          推薦學習:《react視頻教程》

          以上就是小程序能用react嗎的詳細內容,更多請關注php中文網其它相關文章!

          關鍵詞:

          中文字幕在线观看2021
          <dd id="3pk9i"><optgroup id="3pk9i"><video id="3pk9i"></video></optgroup></dd>
          <rp id="3pk9i"></rp>

          <dd id="3pk9i"><track id="3pk9i"></track></dd>
            1. <th id="3pk9i"></th>
              1. <ol id="3pk9i"><ruby id="3pk9i"></ruby></ol>