小谈React、React Native、React Web

绝地灬酷狼 2022-02-16 10:55 219阅读 0赞

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][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][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]

[http_www.tuicool.com_articles_nu6zInB]: http://www.tuicool.com/articles/nu6zInB
[http_www.jianshu.com_p_b5a91a503e6e]: http://www.jianshu.com/p/b5a91a503e6e
[http_www.cnblogs.com_lovesong_p_5679734.html]: http://www.cnblogs.com/lovesong/p/5679734.html