我已经开始学习React出于好奇,想知道React和React Native之间的区别-虽然不能找到一个满意的答案使用谷歌。React和React Native似乎有相同的格式。它们的语法完全不同吗?
当前回答
react是一个核心框架,旨在构建基于响应式模式的组件,你可以把它看作是MVC中的V,尽管我想说的是,react确实带来了不同的感觉,特别是如果你不太熟悉响应式的概念。
ReactNative是另一层,旨在为Android和iOS平台提供一套常见的组件。所以代码看起来基本上与ReactJS相同,因为它是ReactJS,但它是在移动平台上原生加载的。你也可以根据操作系统将更复杂的和平台相关的API与Java/Objective-C/Swift连接起来,并在React中使用它。
其他回答
REACT是一个Javascript库,用于构建像Facebook这样的大型/小型界面web应用程序。
REACT NATIVE是一个Javascript框架,用于开发Android、IOS和Windows Phone上的原生移动应用程序。
两者都是由Facebook开源的。
ReactJS是一个JavaScript库,支持前端web和在服务器上运行,用于构建用户界面和web应用程序。它遵循可重用组件的概念。
React Native是一个移动框架,它利用了主机上可用的JavaScript引擎,允许你在JavaScript中为不同的平台(iOS, Android和Windows mobile)构建移动应用程序,允许你使用React js构建可重用的组件,并与本地组件通信
两者都遵循JavaScript的JSX语法扩展。它编译为React。createElement在底层调用。JSX深入
两者都是由Facebook开源的。
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。
有点晚了,但这里有一个更全面的答案,有例子:
反应
React是一个基于组件的UI库,它使用一个“影子DOM”来有效地更新DOM所更改的内容,而不是为每个更改重新构建整个DOM树。它最初是为web应用程序构建的,但现在也可以用于移动和3D/vr。
React和React Native之间的组件不能互换,因为React Native映射到原生移动UI元素,但业务逻辑和非渲染相关的代码可以重用。
ReactDOM
最初包含在React库中,但当React被用于其他平台而不仅仅是web时,它就被分离了。它作为DOM的入口点,并与React联合使用。
例子:
import React from 'react';
import ReactDOM from 'react-dom';
class App extends Component {
state = {
data: [],
}
componentDidMount() {
const data = API.getData(); // fetch some data
this.setState({ data })
}
clearData = () => {
this.setState({
data: [],
});
}
render() {
return (
<div>
{this.state.data.map((data) => (
<p key={data.id}>{data.label}</p>
))}
<button onClick={this.clearData}>
Clear list
</button>
</div>
);
}
}
ReactDOM.render(App, document.getElementById('app'));
反应本地
React Native是一个跨平台的移动框架,它使用React,并通过“桥”在Javascript和它的本地对等物之间进行通信。因此,在使用React Native时,许多UI结构必须有所不同。例如:当构建一个列表时,如果你试图使用map来构建列表而不是React Native的FlatList,你会遇到主要的性能问题。React Native可以用来构建IOS/Android移动应用程序,也可以用于智能手表和电视。
Expo
当启动一个新的React Native应用程序时,Expo是首选。
Expo是一个通用React应用程序的框架和平台。它是一套围绕React Native和原生平台构建的工具和服务,可以帮助您开发、构建、部署和快速迭代iOS、Android和web应用程序
注意:当使用Expo时,你只能使用他们提供的原生Api。你所包含的所有附加库都需要是纯javascript,否则你将需要弹出expo。
使用React Native的相同示例:
import React, { Component } from 'react';
import { Flatlist, View, Text, StyleSheet } from 'react-native';
export default class App extends Component {
state = {
data: [],
}
componentDidMount() {
const data = API.getData(); // fetch some data
this.setState({ data })
}
clearData = () => {
this.setState({
data: [],
});
}
render() {
return (
<View style={styles.container}>
<FlatList
data={this.state.data}
renderItem={({ item }) => <Text key={item.id}>{item.label}</Text>}
/>
<Button title="Clear list" onPress={this.clearData}></Button>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
});
差异:
Notice that everything outside of render can remain the same, this is why business logic/lifecycle logic code can be re-used across React and React Native In React Native all components need to be imported from react-native or another UI library Using certain API's that map to native components are usually going to be more performant than trying to handle everything on the javascript side. ex. mapping components to build a list vs using flatlist Subtle differences: things like onClick turn into onPress, React Native uses stylesheets to define styles in a more performant way, and React Native uses flexbox as the default layout structure to keep things responsive. Since there is no traditional "DOM" in React Native, only pure javascript libraries can be used across both React and React Native
React360
值得一提的是,React还可以用于开发3D/VR应用程序。组件结构与React Native非常相似。https://facebook.github.io/react-360/
React-Native是一个跨平台的应用程序,使用reactjs为所有平台(iOS, Android, Web, Windows, Mac, Linux)构建相同的代码。
实现上的区别在于reactjs使用HTML标记,而react-native使用react-native特定的组件。