我已经开始学习React出于好奇,想知道React和React Native之间的区别-虽然不能找到一个满意的答案使用谷歌。React和React Native似乎有相同的格式。它们的语法完全不同吗?
当前回答
至于组件的生命周期和所有其他功能,基本上都是一样的。
区别主要在于使用的JSX标记。React使用了一个类似html的格式。另一个是react-native用来显示视图的标记。
其他回答
REACT是一个Javascript库,用于构建像Facebook这样的大型/小型界面web应用程序。
REACT NATIVE是一个Javascript框架,用于开发Android、IOS和Windows Phone上的原生移动应用程序。
两者都是由Facebook开源的。
反应:
React是一个声明性的、高效的、灵活的JavaScript库 构建用户界面。
本机反应:
React Native lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI from declarative components. With React Native, you don't build a “mobile web app”, an “HTML5 app”, or a “hybrid app”. You build a real mobile app that's indistinguishable from an app built using Objective-C or Java. React Native uses the same fundamental UI building blocks as regular iOS and Android apps. You just put those building blocks together using JavaScript and React. React Native lets you build your app faster. Instead of recompiling, you can reload your app instantly. With hot reloading, you can even run new code while retaining your application state. Give it a try - it's a magical experience. React Native combines smoothly with components written in Objective-C, Java, or Swift. It's simple to drop down to native code if you need to optimize a few aspects of your application. It's also easy to build part of your app in React Native, and part of your app using native code directly - that's how the Facebook app works.
基本上React是web应用视图的UI库,使用javascript和JSX, React native是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 Native代码示例:
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://reactjs.org/
有关React Native的更多信息,请访问下面的React Native网站:
https://reactnative.dev/
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的快速差异/相似之处。
在Reactjs中,虚拟DOM用于在Reactjs中渲染浏览器代码,而在React Native中,本地api用于渲染移动设备中的组件。
用Reactjs开发的应用程序在UI中渲染HTML,而React Native使用JSX来渲染UI,这只是javascript。
React-Native是一个跨平台的应用程序,使用reactjs为所有平台(iOS, Android, Web, Windows, Mac, Linux)构建相同的代码。
实现上的区别在于reactjs使用HTML标记,而react-native使用react-native特定的组件。