我已经开始学习React出于好奇,想知道React和React Native之间的区别-虽然不能找到一个满意的答案使用谷歌。React和React Native似乎有相同的格式。它们的语法完全不同吗?
当前回答
一个简单的比较应该是
反应Js
return(
<div>
<p>Hello World</p>
</div>
)
反应本地
return(
<View>
<Text>Hello World</Text>
</View>
)
React Native没有像div, p, h1等Html元素,相反,它有对移动设备有意义的组件。 详情见https://reactnative.dev/docs/components-and-apis
其他回答
ReactJS是一个用于构建UI组件层次结构的框架。每个组件都有状态和道具。数据通过道具从顶层流向底层组件。在顶级组件中使用事件处理程序更新状态。
React native使用React框架为移动应用程序构建组件。React native为iOS和Android平台提供了一组基本的组件。React Native中的一些组件是Navigator, TabBar, Text, TextInput, View, ScrollView。这些组件内部使用原生iOS UIKit和Android UI组件。React native还允许使用NativeModules,其中用iOS的objective - c和Android的Java编写的代码可以在JavaScript中使用。
注意:React Native作为一个框架,允许以类似HTML和CSS的语法开发移动应用程序。原生组件在原生开发中有效地取代了HTML。
至于组件的生命周期和所有其他功能,基本上都是一样的。
区别主要在于使用的JSX标记。React使用了一个类似html的格式。另一个是react-native用来显示视图的标记。
这里有一个很好的解释:
Reactjs是一个同时支持前端和服务器的JavaScript库。此外,它还可以用于为移动应用程序和网站创建用户界面。
React Native是一个跨平台的移动框架,使用Reactjs来构建应用程序和网站。React Native编译成本地应用程序组件,使程序员能够用JavaScript构建可以在不同平台(如Windows、Android、iOS)上运行的移动应用程序。
Reactjs can be described as a base derivative of React DOM, for the web platform while React Native is a base derivative in itself, which means that the syntax and workflow remain the same, but components alter. Reactjs, eventually, is a JavaScript library, which enables the programmer to create an engaging and high performing UI Layer while React Native is an entire framework for building cross-platform apps, be it web, iOS or Android. In Reactjs, virtual DOM is used to render browser code in Reactjs while in React Native, native APIs are used to render components in mobile. The apps developed with Reactjs renders HTML in UI while React Native uses JSX for rendering UI, which is nothing but javascript. CSS is used for creating styling in Reactjs while a stylesheet is used for styling in React Native. In Reactjs, the animation is possible, using CSS, just like web development while in React Native, an animated API is used for inducing animation across different components of the React Native application. If the need is to build a high performing, dynamic, and responsive UI for web interfaces, then Reactjs is the best option while if the need is to give mobile apps a truly native feeling, then React Native is the best option.
更多信息请点击:https://www.simform.com/reactjs-vs-reactnative/
React Js是一个Javascript库,你可以使用React开发和运行更快的web应用程序。
React Native让你只使用JavaScript构建移动应用程序,它用于移动应用程序开发。更多信息请点击这里https://facebook.github.io/react-native/docs/getting-started.html
我知道已经有很多答案了,但在读完这些之后,我觉得没有人能解释这两者之间的架构差异以及它们是如何工作的,所以我相信仍然有解释的空间。
反应
React = vanilla js + es6 + HTML + CSS = jsx = Web apps(前端)
所以让我们先谈谈React,因为React- native也是基于React的,并且在那里使用了相同的JS概念。
React是一个JS库,用于制作漂亮的,灵活的,高性能的单页web应用程序,所以现在一个问题会出现在你的脑海中什么是单页web应用程序?
单页面应用程序
A single-page application is an app that works inside a browser and does not require page reloading during use. You are using these types of applications every day. These are, for instance: Gmail, Google Maps, Facebook, or GitHub. SPAs are all about serving an outstanding UX by trying to imitate a “natural” environment in the browser — no page reloads, no extra wait time. It is just one web page that you visit which then loads all other content using JavaScript — which they heavily depend on. SPA requests the markup and data independently and renders pages straight in the browser. We can do this thanks to advanced JavaScript frameworks like AngularJS, Ember.js, Meteor.js, Knockout.js, React.js, and Vue.js. Single-page sites help keep the user in one, comfortable web space where content is presented to the user in a simple, easy, and workable fashion.
它是如何工作的
现在你知道SPA是什么了,你知道它是一个web应用程序,所以它会使用HTML元素运行到浏览器中,也会使用JS来处理所有与这些元素相关的功能。 它使用Virtual DOM来呈现组件中的新更改。
React-Native
现在你对react有了一点了解,我们来谈谈react-native
React-Native = React(香草JS + ES6 + JS和本机代码之间的桥梁)+ Native(iOS, Android) =移动应用程序(Android, iOS,也支持web,但有一些限制)
React- native用于使用React制作漂亮的跨平台移动应用程序(Android, iOS)。
它是如何工作的
在React-Native中有两个线程。
JS线程 本机线程
所有的React代码都在JS线程中执行,最终值传递给本机线程,该线程在屏幕上用最终值绘制布局。
JS线程执行所有的计算和传递数据到本机,如何?
React使用Async Bridge以JSON格式将数据传递给Native线程,称为React-Native
注意:新的体系结构不再依赖于桥,它使用JSI和fabric来进行本机代码和JS代码之间的同步通信(这将在下一节中解释)。
因此,我们使用本机组件在react-native中创建表示视图,并使用该桥梁在这两个不同的世界之间进行通信。
JS线程足够快,可以执行JavaScript,本地线程也足够快,可以执行本地代码,但由于React使用异步桥接在这两个世界之间通信,重载这个桥接会导致性能问题。
更新: React-Native现在正在经历一个重新架构的阶段,Facebook团队正试图删除异步桥,以同步地在JS和本机之间通信,这个重新架构的主要部分是JSI(Javascript接口)和结构。
JSI: JSI消除了本地(Java/ObjC)和Javascript代码之间桥梁的需要。它还消除了将所有信息序列化/反序列化为JSON的需求,以便在两个世界之间进行通信。JSI通过将javascript和本地世界结合在一起,为新的可能性打开了大门。
下面是JSI提供的主要功能。
Javascript Interface which allows us to register methods with the Javascript runtime. These methods are available via the global object in the Javascript world. The methods can be entirely written in C++ or they can be a way to communicate with Objective C code on iOS and Java code on Android. Any native module that is currently using the traditional bridge for communication between Javascript and the native worlds can be converted to a JSI module by writing a simple layer in C++ On iOS writing, this layer is simple because C++ can run directly in Objective C hence all the iOS frameworks and code is available to use now. On android however we have to go the extra mile to do this through JNI. These methods can be fully synchronous which means using async/await is not mandatory.
Fabric:根据文档,Fabric是一个新的UI层,允许我们与本地UI组件同步通信。
Fabric是React Native的新渲染系统,是遗留渲染系统的概念进化。核心原则是在c++中统一更多的呈现逻辑,提高与主机平台的互操作性,并为React Native解锁新功能。开发始于2018年和2021年,Facebook应用程序中的React Native得到了新的渲染器的支持。
让我们来谈谈这两个框架的共同点和不同点。
Feature | React | React-Native |
---|---|---|
Platform | Web | Android, IOS, Web |
Open Source | Yes | Yes |
User Interface | HTML + CSS | Native Components(iOS, Android, Web) |
Architecture | Virtual DOM | Virtual DOM + Bridge + Native implementation |
Animations | CSS Animations | Native Animations |
Styling | CSS | JS Stylesheets |
Developed By |
推荐文章
- 如何清除所有<div>的内容在一个父<div>?
- 检测用户何时离开网页的最佳方法?
- 当“模糊”事件发生时,我如何才能找到哪个元素的焦点去了*到*?
- React不会加载本地图像
- 如何将Blob转换为JavaScript文件
- 在另一个js文件中调用JavaScript函数
- 如何在svg元素中使用z索引?
- 如何求一个数的长度?
- 跨源请求头(CORS)与PHP头
- 如何用Express/Node以编程方式发送404响应?
- parseInt(null, 24) === 23…等等,什么?
- JavaScript变量声明在循环外还是循环内?
- 元素在“for(…in…)”循环中排序
- 在哪里放置JavaScript在HTML文件?
- Axios获取url工作,但第二个参数作为对象,它不