我已经开始学习React出于好奇,想知道React和React Native之间的区别-虽然不能找到一个满意的答案使用谷歌。React和React Native似乎有相同的格式。它们的语法完全不同吗?
当前回答
React-Native是一个跨平台的应用程序,使用reactjs为所有平台(iOS, Android, Web, Windows, Mac, Linux)构建相同的代码。
实现上的区别在于reactjs使用HTML标记,而react-native使用react-native特定的组件。
其他回答
React Native主要是用JavaScript开发的,这意味着你需要开始的大部分代码都可以跨平台共享。React Native将使用本地组件进行渲染。React Native应用程序是用目标平台所需的语言开发的,iOS的Objective-C或Swift, Android的Java等。所编写的代码不是跨平台共享的,它们的行为各不相同。他们可以直接使用平台提供的所有功能,不受任何限制。
React是Facebook开发的一个开源JavaScript库,用于构建用户界面。它用于处理web和移动应用程序的视图层。ReactJS用于创建可重用的UI组件。它是目前It领域最流行的JavaScript库之一,它有强大的基础和庞大的社区支持。如果你学习ReactJS,你需要有JavaScript, HTML5和CSS的知识。
区别很简单。
我们使用React开发web应用程序,使用React Native开发移动应用程序。
React更专注于改进UI(用户界面),而RN则为所有操作系统共享一个公共逻辑层。这为现在已经处理了很长一段时间的问题提供了解决方案,例如开发效率低、部署时间较慢和开发人员生产力较低。
需要注意的是,React是一个用于web开发的库,而React Native是一个平台。
另一件有趣的事情是,当您想要使用RN时,您拥有启动项目所需的一切。另一方面,用React创建一个新项目意味着你只选择了构建web应用程序所需的众多库中的一个。
你可以在那篇文章中找到更多有用的信息: https://pagepro.co/blog/react-native-faq-all-you-need-to-know
React-Native是一个用于开发Android和iOS应用程序的框架,它共享80% - 90%的Javascript代码。
而React.js是用于开发web应用程序的父Javascript库。
当你在React-Native中使用像<View>, <Text>这样的标签时,React.js使用像<div> <h1> <h2>这样的web html标签,这只是web/移动开发词典中的同义词。 对于React.js,你需要DOM来渲染html标签的路径,而对于移动应用程序:React-Native使用AppRegistry来注册你的应用程序。
我希望这是一个简单的解释React.js和React-Native的快速差异/相似之处。
为了回应上面@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.js用于Web开发,而React-Native用于移动应用程序开发