我已经开始学习React出于好奇,想知道React和React Native之间的区别-虽然不能找到一个满意的答案使用谷歌。React和React Native似乎有相同的格式。它们的语法完全不同吗?
当前回答
总结:React.js用于Web开发,而React-Native用于移动应用程序开发
其他回答
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。
为了回应上面@poshest的评论,这里有一个React Native版本的时钟代码,之前在React中发布(抱歉,我无法直接评论这部分,否则我会在那里添加代码):
React Native代码示例
import { AppRegistry } from 'react-native';
import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';
class Clock extends 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 (
<View style={styles.container}>
<Text style={styles.sectionTitle}>Hello, world!</Text>
<Text style={styles.sectionDescription}>It is {this.state.date.toLocaleTimeString()}.</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
backgroundColor: 'white',
flex: 1,
justifyContent: 'center',
},
sectionTitle: {
fontSize: 24,
fontWeight: '600',
color: 'black',
alignSelf: 'center',
},
sectionDescription: {
marginTop: 8,
fontSize: 18,
fontWeight: '400',
color: 'darkgrey',
alignSelf: 'center',
},
});
AppRegistry.registerComponent("clock", () => Clock);
注意,样式完全是我的选择,并不寻求直接复制在React代码中使用的<h1>和<h2>标记。
react是一个核心框架,旨在构建基于响应式模式的组件,你可以把它看作是MVC中的V,尽管我想说的是,react确实带来了不同的感觉,特别是如果你不太熟悉响应式的概念。
ReactNative是另一层,旨在为Android和iOS平台提供一套常见的组件。所以代码看起来基本上与ReactJS相同,因为它是ReactJS,但它是在移动平台上原生加载的。你也可以根据操作系统将更复杂的和平台相关的API与Java/Objective-C/Swift连接起来,并在React中使用它。
反应
React is used for creating websites, web apps, SPAs etc. React is a Javascript library used for creating UI hierarchy. It is responsible for rendering of UI components, It is considered as V part Of MVC framework. React’s virtual DOM is faster than the conventional full refresh model, since the virtual DOM refreshes only parts of the page, Thus decreasing the page refresh time. React uses components as basic unit of UI which can be reused this saves coding time. Simple and easy to learn. React Native React Native is a framework that is used to create cross-platform Native apps. It means you can create native apps and the same app will run on Android and ios. React native have all the benefits of ReactJS React native allows developers to create native apps in web-style approach.
一个简单的比较应该是
反应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