react多端統一框架有:Hippy框架和Taro框架。Hippy是騰訊QQ瀏覽器部門發起的開源跨端框架,同時支援React和Vue;Taro是凹凸實驗室打造的一套遵循React語法規範的多端統一開發框架。
react多端統一框架
騰訊跨端框架- Hippy
當前star:4.5k
Github :https://github.com/Tencent/Hippy
騰訊QQ瀏覽器部門發起的開源跨端框架 Hippy。在騰訊內部,Hippy 已執行3年之久,跨 BG 共有 18 款線上業務正在使用 Hippy,日均 PV 過億,且已建立一套完整生態。相較於其他跨端框架,Hippy 對前端開發者更友好:緊貼 W3C 標準,遵從網頁開發各項規則,使用 JavaScript 為開發語言,同時支援 React 和 Vue 兩種前端主流框架。
Hippy 實現了類似 Flutter 的引擎直通架構(在 React Native 中的 Fabric 架構),通過 C++ 開發的模組直接插入 JS 引擎中執行,繞過了前終端通訊編解碼的開銷,有效提升了 JS 前端程式碼和終端的通訊效能。在此基礎之上,Hippy 正在實現高效能自繪,以提供更強的效能和更好的使用者體驗。
hippy-react 從語法上更加接近終端底層,某種程度上語法接近 React Native,同時通過官方提供了 hippy-react-web 元件庫,也可以方便地生成 Web 版網頁。
特徵:
為傳統 Web 前端設計,官方支援 React 和 Vue 兩種主流前端框架。
不同的平臺保持了相同的介面。
通過 JS 引擎 binding 模式實現的前終端通訊。
提供了高效能的可複用列表。
皆可平滑遷移到 Web 瀏覽器。
完整支援 Flex 的佈局引擎。
京東跨端框架 - Taro
當前star:24.5k
GitHub: http://github.com/nervjs/taro
Taro 是由京東 - 凹凸實驗室打造的一套遵循 React 語法規範的多端統一開發框架。
一套程式碼,通過 Taro 的編譯工具,將原始碼分別編譯出可以在不同端(微信小程式、H5、App 端等)執行的程式碼。同時 Taro 還提供開箱即用的語法檢測和自動補全等功能,有效地提升了開發體驗和開發效率。
和微信自帶的小程式框架不一樣,Taro 積極擁抱社群現有的現代開發流程,包括但不限於:
NPM 包管理系統
ES6+ 語法
自由的資源參照
CSS 前處理器和後處理器(SCSS、Less、PostCSS)
對於微信小程式的編譯流程,Taro的靈感來源於 Parcel ,自研了一套打包機制將 AST 不斷傳遞,因此程式碼分析的速度得到了很大的提高。一臺 2015 年 的 15寸 RMBP 在編譯上百個元件時僅需要大約 15 秒左右。
在 Taro 中,你不用像小程式一樣區分什麼是 App 元件,什麼是 Page 元件,什麼是 Component 元件,Taro 全都是 Component 元件,並且和 React 的生命週期完全一致。可以說,一旦你掌握了 React,那就幾乎掌握了 Taro。同樣使用宣告式的 JSX 語法。相比起字串的模板語法,JSX 在處理精細複雜需求的時候會更得心應手。
// 一個典型的 Taro 元件 import Taro, { Component } from '@tarojs/taro' import { View, Button } from '@tarojs/components' export default class Homeextends Component{ constructor (props) { super(props) this.state = { title: '首頁', list: [1, 2, 3] } } componentWillMount () {} componentDidMount () {} componentWillUpdate (nextProps, nextState) {} componentDidUpdate (prevProps, prevState) {} shouldComponentUpdate (nextProps, nextState) { return true } add = (e) => { // dosth } render () { const { list, title } = this.state return ( <ViewclassName='index'> <ViewclassName='title'>{title}</View> <ViewclassName='content'> {list.map(item => { return ( <ViewclassName='item'>{item}</View> ) })} <ButtonclassName='add'onClick={this.add}>新增</Button> </View> </View> ) } }
更多程式設計相關知識,請存取:!!
以上就是有哪些react多端統一框架?的詳細內容,更多請關注TW511.COM其它相關文章!