小谈React、React Native、React Web 绝地灬酷狼 2022-02-16 10:55 188阅读 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
还没有评论,来说两句吧...