您好,欢迎访问一九零五行业门户网

有哪些react多端统一框架?

react多端统一框架有:1、hippy框架和taro框架,hippy是腾讯qq浏览器部门发起的开源跨端框架,同时支持react和vue;2、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多端统一框架?的详细内容。
其它类似信息

推荐信息