小編給大家分享一下react多端統(tǒng)一框架是什么，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

成都創(chuàng)新互聯(lián)是一家朝氣蓬勃的網站建設公司。公司專注于為企業(yè)提供信息化建設解決方案。從事網站開發(fā)，網站制作，網站設計，網站模板，微信公眾號開發(fā)，軟件開發(fā)，微信小程序，10多年建站對混凝土泵車等多個方面，擁有豐富的網站制作經驗。

react多端統(tǒng)一框架有：Hippy框架和Taro框架。Hippy是騰訊QQ瀏覽器部門發(fā)起的開源跨端框架，同時支持React和Vue；Taro是凹凸實驗室打造的一套遵循React語法規(guī)范的多端統(tǒng)一開發(fā)框架。

react多端統(tǒng)一框架

騰訊跨端框架- Hippy

當前star：4.5k

Github ：https://github.com/Tencent/Hippy

騰訊QQ瀏覽器部門發(fā)起的開源跨端框架 Hippy。在騰訊內部，Hippy 已運行3年之久，跨 BG 共有 18 款線上業(yè)務正在使用 Hippy，日均 PV 過億，且已建立一套完整生態(tài)。相較于其他跨端框架，Hippy 對前端開發(fā)者更友好：緊貼 W3C 標準，遵從網頁開發(fā)各項規(guī)則，使用 JavaScript 為開發(fā)語言，同時支持 React 和 Vue 兩種前端主流框架。

Hippy 實現(xiàn)了類似 Flutter 的引擎直通架構（在 React Native 中的 Fabric 架構），通過 C++ 開發(fā)的模塊直接插入 JS 引擎中運行，繞過了前終端通訊編解碼的開銷，有效提升了 JS 前端代碼和終端的通訊性能。在此基礎之上，Hippy 正在實現(xiàn)高性能自繪，以提供更強的性能和更好的用戶體驗。

hippy-react 從語法上更加接近終端底層，某種程度上語法接近 React Native，同時通過官方提供了 hippy-react-web 組件庫，也可以方便地生成 Web 版網頁。

特征：

• 為傳統(tǒng) Web 前端設計，官方支持 React 和 Vue 兩種主流前端框架。

• 不同的平臺保持了相同的接口。

• 通過 JS 引擎 binding 模式實現(xiàn)的前終端通訊。

• 提供了高性能的可復用列表。

• 皆可平滑遷移到 Web 瀏覽器。

• 完整支持 Flex 的布局引擎。

京東跨端框架 - Taro

當前star：24.5k

GitHub: http://github.com/nervjs/taro

Taro 是由京東 - 凹凸實驗室打造的一套遵循 React 語法規(guī)范的多端統(tǒng)一開發(fā)框架。

一套代碼，通過 Taro 的編譯工具，將源代碼分別編譯出可以在不同端（微信小程序、H5、App 端等）運行的代碼。同時 Taro 還提供開箱即用的語法檢測和自動補全等功能，有效地提升了開發(fā)體驗和開發(fā)效率。

和微信自帶的小程序框架不一樣，Taro 積極擁抱社區(qū)現(xiàn)有的現(xiàn)代開發(fā)流程，包括但不限于：

• NPM 包管理系統(tǒng)

• ES6+ 語法

• 自由的資源引用

• CSS 預處理器和后處理器（SCSS、Less、PostCSS）

對于微信小程序的編譯流程，Taro的靈感來源于 Parcel ，自研了一套打包機制將 AST 不斷傳遞，因此代碼分析的速度得到了很大的提高。一臺 2015 年 的 15寸 RMBP 在編譯上百個組件時僅需要大約 15 秒左右。

在 Taro 中，你不用像小程序一樣區(qū)分什么是 App 組件，什么是 Page 組件，什么是 Component 組件，Taro 全都是 Component 組件，并且和 React 的生命周期完全一致?？梢哉f，一旦你掌握了 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多端統(tǒng)一框架是什么”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

當前名稱：react多端統(tǒng)一框架是什么-創(chuàng)新互聯(lián)
標題路徑：http://chinadenli.net/article18/dgjhdp.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供品牌網站制作、網站設計公司、網站排名、網站策劃、靜態(tài)網站、網站內鏈

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)