React的特性怎么使用

這篇“React的特性怎么使用”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“React的特性怎么使用”文章吧。

多端一致的開發體驗

毫無疑問，小程序原生語法的開發體驗是為人所詬病的，從微信開始到后來的眾多追隨者如支付寶、百度、頭條等，都選擇了與微信類似的架構設計，但也存在著一定的差異性，導致開發人員需要適配的小程序平臺越來越多，而每個端開發一套代碼又不現實，進一步導致研發成本上升，代碼維護困難。

社區基于小程序的上層開發框架也層出不窮，這類框架主要的區別和重心在于 DSL 和 多端適配。核心解決的是能復用現有 Web 的生態，以及能提供不同平臺一致性的開發體驗。如能使用類 React 或者類 Vue 去開發小程序，能復用 NPM 上數以萬計的工具包等。

這是很重要但也很基礎的能力，但在飛冰體系中卻有所不同，除了支持阿里、支付寶等不同端開發的一致性之外，我們致力于為 ICE 開發者提供更簡單更平滑的開發小程序的解決方案， 這意味著如果你使用 ice.js 開發過中后臺應用，那么幾乎可以無任何成本的上手小程序開發。同時將中后臺領域沉淀出的標準化的 React 應用開發模式和最佳實踐，完全應用到了小程序開發上，包括但不限于狀態管理、數據請求、生命周期、樣式、Hooks 等能力，

提供從中后臺到小程序開發的體驗一致性是至關重要的，這其中包括：

• 開發心智：提供完整的 React 支持，無需額外的學習成本；

• 開發體驗：提供基于 VS Code 的輔助插件，默認支持 TypeScript；

• 多端適配：一次編碼多端投放，已支持阿里小程序，支付寶小程序，Web；

• 社區生態：與現有社區生態完全兼容。

不受限制地使用 React 所有特性

ice.js 的小程序機制基于 Rax 小程序的運行時方案，采用模擬 DOM/BOM API 的方式適配，因此可做到 DSL 無關。目前這套方案已經在阿里內部落地 100+ 小程序項目，經過了大量線上項目的驗證，值得信賴。讓你可以不受限制地使用 React 所有特性。

• 幾乎沒有任何語法約束

• 支持使用 Hooks

• 支持操作 DOM （不推薦）

• 豐富的 React 社區生態

邏輯層做的事情其實比較復雜。首先要做的是，去處理節點間的關系，去模擬appendChild/ removeChild/updateNode 等各個行為來操作 VDOM 樹。其次是去模擬事件，在邏輯層每一個節點類會繼承自 EventTarget 基類，這個和 W3C 是一樣的，然后通過 nodeId 作為標識去收集需要監聽的事件，當視圖層通過 action 觸發了某個節點的事件之后，再通過原生小程序事件中的 event.currentTarget.dataset.nodeId獲取到目標節點的 id，最終觸發目標回調。

完備的應用開發實踐

ice.js 小程序在設計上繼承了Web應用開發的最佳實踐，如果你使用過ice.js 開發過應用，那么使用它開發小程序幾乎是零成本的，遵循同一套開發規范和最佳實踐。

應用入口** 通過默認生成的代碼運行應用而無需任何配置，只需要調用 runApp 即可啟動小程序。

import { runApp } from 'ice';


runApp();

生命周期

生命周期指的是應用自身的一些函數，這些函數在特殊的時間點或一些特殊的框架事件時被自動觸發。框架提供了完整的應用生命周期能力。

import { runApp } from 'ice';


const appConfig = {
  app: {
    // 應用啟動的時候觸發
    onLaunch() {},


    // 應用喚起時觸發
    // 應用從后臺切到前臺的時候觸發
    onShow() {},


    // 應用從前臺切到后臺的時候觸發
    onHide() {},


    // 監聽全局錯誤
    onError(error) {}
  }
};


runApp(appConfig);

全局配置

用于對應用進行全局的靜態配置，如設置路由、窗口表現等。

• routes 用于指定應用的頁面，每一項代表對應頁面的路徑及文件信息。

{
  "routes": [
    {
      "path": "/",
      "source": "pages/Home/index"
    }
  ]
}

• window 用于配置應用的窗口表現，同時也支持針對每個頁面設置窗口表現。目前已經支持的參數的有：

{
  "window": {
    "titleBarColor": "",
    "pullRefresh": true,
    "title": "Home"
  }
}

樣式方案

默認推薦使用 CSS Modules 方案，這能很好的解決樣式開發中的全局污染和命名混亂的兩個痛點問題。但同時也支持 Sass、Less 等編寫樣式。

數據請求

大多數情況下都需要通過 HTTP 協議與后端服務器通訊，開發小程序時我們提供了 universal-request 用于網絡請求，該模塊已支持多端發送請求。

Hooks 方案

開發小程序時除了使用基礎的 Hooks 之外，我們還提供了一套完備的自定義 Hooks 的工具庫 ahooks，覆蓋絕大部分的 Hooks 場景，助力您的應用開發。

更多其他細節如狀態管理，工程配置，事件等能力詳見官網文檔。

三分鐘上手

初始化項目

基于 npm init ice 命令選擇初始化模板進行下載：

$ npm init ice <projectName>


# 或者使用 yarn
$ yarn create ice <projectName>

選擇模板

可選擇小程序  TypeScript  或者 JavaScript 模板：

? Please select a template (Use arrow keys)
? Lightweight JavaScript template with Mini Program
  Lightweight TypeScript template with Mini Program

啟動項目

使用小程序開發者工具打開項目，執行以下命令即可看到如下界面:

$ cd <projectName>
$ npm install
$ npm start

以上就是關于“React的特性怎么使用”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。