小谈React、React Native、React Web

简介:

React有三个东西,React JS 前端Web框架,React Native 移动终端Hybrid框架,React Web是一个源码转换工具(React Native 转 Web,并之所以特别提出,是觉得还有些用处)。 

React、React Native共同特点

起源

Facebook 的内部项目

理念

Learn once, write anywhere,而不是Write once, run anywhere。简单说就是,让你在Web、Mobile原生的开发套路一样,但你还是需要写两套代码。Web Components的理解与实现。

开发工具

普通文本编辑器、Notepad++等即可

代码写法

支持ES6,组件化,看起来像NodeJS,所有代码是写在js里的,无论是样式还是模板。

组件化

易复用:组件的复用变得非常容易,它们都是独立的。

利解耦:使得组件的实现关注分离,利于解耦,更容易被理解和维护。

规范性:利用到ES6的模块加载和导出,使得代码简单就能按规范的写。也因为规范实现,使得Github上有的,就可以拿来用。

可组合:一个组件易于和其它组件一起使用,或者嵌套在另一个组件内部。如果一个组件内部创建了另一个组件,那么说父组件拥有(own)它创建的子组件,通过这个特性,一个复杂的UI可以拆分成多个简单的UI组件。

React

框架目的

基于组件化的开发,所以最终你的页面应该是由若干个小组件组成的大组件。

浏览器兼容

IE8+

运行方式

一般需要先一层编译,或者解析

PS:React JS我并没有用过,不过写法是React Native一样。

React Native

框架目的

用js开发出效果接近原生的Android、iOS应用。原因UI组件是原生实现原因,效果是相近原生的。(做得像原生,那就得用原生做)

PS:目前Saas Link里面的应用的效果在Android机器还是不大好

开发环境

iOS、Android按照官方文档搭建,大概1个小时。

开发调试

1. 能够在Chrome调试js,debug

2. 由于组件由原生渲染,不能调试View

代码风格

JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。

组件生命周期

http://www.tuicool.com/articles/nu6zInB

提供植入原生应用

它很容易嵌入到一个并非由React Native开发的应用当中。作为应用的一部分。

React js的代码能不能直接转React Native?
ReactJs和React Native的原理是相同的,都是由js实现的虚拟dom来驱动界面view层渲染。

只不过ReactJs是驱动html dom渲染; React Native是驱动android/ios原生组件渲染。

真不能转~

真不能Write once, run anywhere?
淘宝前端团队(FED)把 React Native 的组件做了一个 Web 端的实现,并提供相关打包工具,让你可以直接打包出一份可以跑在 Web 端的代码。——React-Web

PS:http://www.jianshu.com/p/b5a91a503e6e

PS:我在本地尝试过,没跑起来,不过据说是可以的。

不过即便是能够转换,需要面对几个问题:

1. 这个转换的工具能否及时跟上React Native发展。

PS:要是这个团队不维护了或更新不及时(目前已经存在这种问题),这种依赖挺麻烦。

2. 存在转换不了的React Native原生功能,这部分还需要做兼容。

3. 没有完善的社区论坛,有问题解决不了。(目前只是在Github)

 

本文为原创文章,转载请保留原出处,方便溯源,如有错误地方,谢谢指正。

本文地址 :http://www.cnblogs.com/lovesong/p/5679734.html


本文转自 海角在眼前 博客园博客,原文链接:  http://www.cnblogs.com/lovesong/p/5679734.html ,如需转载请自行联系原作者

相关文章
|
存储 JavaScript 前端开发
掌握现代Web开发的基石:深入理解React与Redux
【10月更文挑战第14天】掌握现代Web开发的基石:深入理解React与Redux
198 0
|
前端开发 JavaScript UED
构建现代Web应用:使用React框架打造单页面应用
【10月更文挑战第9天】构建现代Web应用:使用React框架打造单页面应用
|
前端开发 JavaScript 测试技术
构建响应式Web应用程序:React实战指南
【10月更文挑战第9天】构建响应式Web应用程序:React实战指南
|
前端开发 JavaScript 开发者
探索现代Web前端技术:React框架入门
【10月更文挑战第9天】 探索现代Web前端技术:React框架入门
|
存储 JavaScript 前端开发
如何使用React和Redux构建现代化Web应用程序
【10月更文挑战第4天】如何使用React和Redux构建现代化Web应用程序
|
开发者 缓存 数据库
【性能奇迹】Wicket应用的极速重生:揭秘那些让开发者心跳加速的调优秘技!
【8月更文挑战第31天】在软件开发中,性能优化是确保应用快速响应和高效运行的关键。本书《性能调优:Apache Wicket应用的速度提升秘籍》详细介绍了如何优化Apache Wicket应用,包括代码优化、资源管理、数据库查询优化、缓存策略及服务器配置等方面。通过减少不必要的组件渲染、优化SQL查询、使用缓存和调整服务器设置等方法,本书帮助开发者显著提升Wicket应用的性能,确保其在高并发和数据密集型场景下的稳定性和响应速度。
144 0
|
Java 前端开发 Spring
技术融合新潮流!Vaadin携手Spring Boot、React、Angular,引领Web开发变革,你准备好了吗?
【8月更文挑战第31天】本文探讨了Vaadin与Spring Boot、React及Angular等主流技术栈的最佳融合实践。Vaadin作为现代Java Web框架,与其他技术栈结合能更好地满足复杂应用需求。文中通过示例代码展示了如何在Spring Boot项目中集成Vaadin,以及如何在Vaadin项目中使用React和Angular组件,充分发挥各技术栈的优势,提升开发效率和用户体验。开发者可根据具体需求选择合适的技术组合。
271 0
|
2月前
|
算法 Java Go
【GoGin】(1)上手Go Gin 基于Go语言开发的Web框架,本文介绍了各种路由的配置信息;包含各场景下请求参数的基本传入接收
gin 框架中采用的路优酷是基于httprouter做的是一个高性能的 HTTP 请求路由器,适用于 Go 语言。它的设计目标是提供高效的路由匹配和低内存占用,特别适合需要高性能和简单路由的应用场景。
244 5
|
6月前
|
缓存 JavaScript 前端开发
鸿蒙5开发宝藏案例分享---Web开发优化案例分享
本文深入解读鸿蒙官方文档中的 `ArkWeb` 性能优化技巧,从预启动进程到预渲染,涵盖预下载、预连接、预取POST等八大优化策略。通过代码示例详解如何提升Web页面加载速度,助你打造流畅的HarmonyOS应用体验。内容实用,按需选用,让H5页面快到飞起!
|
6月前
|
JavaScript 前端开发 API
鸿蒙5开发宝藏案例分享---Web加载时延优化解析
本文深入解析了鸿蒙开发中Web加载完成时延的优化技巧,结合官方案例与实际代码,助你提升性能。核心内容包括:使用DevEco Profiler和DevTools定位瓶颈、四大优化方向(资源合并、接口预取、图片懒加载、任务拆解)及高频手段总结。同时提供性能优化黄金准则,如首屏资源控制在300KB内、关键接口响应≤200ms等,帮助开发者实现丝般流畅体验。

热门文章

最新文章