小编给大家分享一下react多端统一框架是什么，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
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 组件
进口芋头,{组件}& # 39;@tarojs/芋头# 39;
进口{视图,按钮}& # 39;@tarojs/组件# 39;
出口的默认类Homeextends组件{
构造函数(道具){
超级(道具)
这一点。状态={
标题:& # 39;首页& # 39;,
列表(1、2、3):
}
}
componentWillMount () {}
componentDidMount () {}
componentWillUpdate (nextProps nextState) {}
componentDidUpdate (prevProps prevState) {}
shouldComponentUpdate (nextProps nextState) {
还真
}
添加=(e)=比;{//dosth
}
呈现(){
const{列表,标题}=this.state
回报(
& lt; ViewclassName=& # 39;指数# 39;比;
& lt; ViewclassName=& # 39;标题# 39;在{标题}& lt;/View>
& lt; ViewclassName=& # 39;内容# 39;比;
{列表。地图(项=比;{
回报(
& lt; ViewclassName=& # 39;项目# 39;在{项}& lt;/View>
)
})}
& lt; ButtonclassName=& # 39;添加# 39;onClick={this.add}祝辞添加& lt;/Button>
& lt;/View>
& lt;/View>
)
}
} 以上是“反应多端统一框架是什么”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注行业资讯频道!
