出于好奇,我开始学习React并想知道 React 和 React Native 之间的区别 - 尽管使用 Google 找不到令人满意的答案。React 和 React Native 似乎具有相同的格式。他们有完全不同的语法吗?
React Native 和 React 有什么区别?
ReactJS是一个 JavaScript 库,支持前端 Web 和在服务器上运行,用于构建用户界面和 Web 应用程序。它遵循可重用组件的概念。
React Native是一个移动框架,它利用宿主机上可用的 JavaScript 引擎,允许你用 JavaScript 构建不同平台(iOS、Android 和 Windows Mobile)的移动应用程序,允许你使用 ReactJS 构建可重用的组件和通信带有原生组件的进一步说明
两者都遵循 JavaScript 的 JSX 语法扩展。它编译为React.createElement
引擎盖下的调用。JSX 深入
两者都是由 Facebook 开源的。
这是React项目。
在 Facebook,他们发明了React,因此 JavaScript 可以使用虚拟 DOM 模型更快地操作网站 DOM。
与React virtual-dom 模型相比,DOM 完全刷新更慢,后者只刷新页面的一部分(阅读:部分刷新)。
正如您从这段视频中了解到的,Facebook 并没有发明 React,因为他们立即明白部分刷新会比传统刷新更快。最初,他们需要一种方法来减少 Facebook 应用程序的重新构建时间,幸运的是,这使部分 DOM 刷新生效。
React Native只是 React 的结果。它是一个使用 JavaScript 构建本机应用程序的平台。
在使用React Native之前,您需要了解适用于 Android 的 Java 或适用于 iPhone 和 iPad 的 Objective-C 才能创建本机应用程序。
使用 React Native 可以在 JavaScript 中模仿本机应用程序的行为,最后,您将获得平台特定的代码作为输出。如果您需要进一步优化您的应用程序,您甚至可以将本机代码与 JavaScript混合使用。
正如 Olivia Bishop 在视频中所说,85% 的React 原生代码库可以在平台之间共享。这些将是应用程序通常使用的组件和通用逻辑。
15% 的代码是特定于平台的。特定于平台的 JavaScript 赋予平台风味(并使体验有所不同)。
很酷的是这个特定于平台的代码 - 已经编写好了,所以你只需要使用它。
react:
React 是一个声明式、高效且灵活的 JavaScript 库,用于构建用户界面。
react-native:
React Native 允许您仅使用 JavaScript 构建移动应用程序。它使用与 React 相同的设计,让您可以从声明性组件组成丰富的移动 UI。
使用 React Native,您无需构建“移动网络应用程序”、“HTML5 应用程序”或“混合应用程序”。您构建了一个真正的移动应用程序,它与使用 Objective-C 或 Java 构建的应用程序没有区别。React Native 使用与常规 iOS 和 Android 应用程序相同的基本 UI 构建块。您只需使用 JavaScript 和 React 将这些构建块放在一起。
React Native 可让您更快地构建应用程序。您可以立即重新加载您的应用程序,而不是重新编译。通过热重载,您甚至可以在保持应用程序状态的同时运行新代码。尝试一下 - 这是一次神奇的体验。
React Native 与用 Objective-C、Java 或 Swift 编写的组件顺利结合。如果您需要优化应用程序的某些方面,可以轻松下拉到本机代码。在 React Native 中构建应用程序的一部分以及直接使用本机代码构建应用程序的一部分也很容易 - 这就是 Facebook 应用程序的工作方式。
所以基本上阵营是一种网络应用程序的角度来看,使用的UI库的JavaScript和JSX,阵营本土上发生react顶部的额外库,使本机应用程序用于iOS
与Android
设备。
react代码示例:
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
class Clock extends React.Component {
constructor(props) {
super(props);
this.state = {date: new Date()};
}
componentDidMount() {
this.timerID = setInterval(
() => this.tick(),
1000
);
}
componentWillUnmount() {
clearInterval(this.timerID);
}
tick() {
this.setState({
date: new Date()
});
}
render() {
return (
<div>
<h1>Hello, world!</h1>
<h2>It is {this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}
}
ReactDOM.render(
<Clock />,
document.getElementById('root')
);
react本机代码示例:
import React, { Component } from 'react';
import { Text, View } from 'react-native';
class WhyReactNativeIsSoGreat extends Component {
render() {
return (
<View>
<Text>
If you like React on the web, you'll like React Native.
</Text>
<Text>
You just use native components like 'View' and 'Text',
instead of web components like 'div' and 'span'.
</Text>
</View>
);
}
}
有关React 的更多信息,请访问由 facebook 团队创建的官方网站:
https://facebook.github.io/react
有关React Native 的更多信息,请访问下面的 React Native 网站:
首先,相似之处: React 和 React Native (RN) 都旨在创建灵活的用户界面。这些框架有很多好处,但最重要的一点是它们是为 UI 开发而设计的。Facebook 在 React 几年后开发了 RN。
React:
Facebook 设计的这个框架几乎就像在 HTML/XML 中编写 JavaScript 一样,这就是为什么这些标签被称为“ JSX ”(JavaScript XML)并且类似于熟悉的类 HTML 标签,例如<div>
或<p>
。React 的一个标志是大写字母标签,它表示一个自定义组件,例如<MyFancyNavbar />
,它也存在于 RN 中。然而,React 使用DOM。DOM 存在于 HTML 中,因此 React 用于 Web 开发。
React Native:
RN 不使用 HTML,因此不用于 Web 开发。它用于……几乎所有其他用途!移动开发(iOS 和 Android)、智能设备(例如手表、电视)、增强现实等。 由于 RN 没有可与之交互的 DOM,而不是使用 React 中使用的相同类型的 HTML 标签,它使用自己的然后被编译成其他语言的标签。例如,<div>
RN 开发人员不使用标签,而是使用 RN 的内置<View>
标签,它会在后台编译成其他本机代码(例如android.view
在 Android 上;UIView
在 iOS 上)。
简而言之:它们非常相似(用于 UI 开发)但用于不同的媒介。
ReactJS 是用于构建 UI 组件层次结构的框架。每个组件都有状态和props。数据通过 props 从顶层组件流向底层组件。使用事件处理程序在顶级组件中更新状态。
React Native 使用 React 框架为移动应用程序构建组件。React Native 为 iOS 和 Android 平台提供了一组基本的组件。React Native 中的一些组件是 Navigator、TabBar、Text、TextInput、View、ScrollView。这些组件在内部使用原生 iOS UIKit 和 Android UI 组件。React Native 还支持 NativeModules,其中 iOS 用 ObjectiveC 和 Android 用 Java 编写的代码可以在 JavaScript 中使用。