我已经开始学习React出于好奇,想知道React和React Native之间的区别-虽然不能找到一个满意的答案使用谷歌。React和React Native似乎有相同的格式。它们的语法完全不同吗?
当前回答
有点晚了,但这里有一个更全面的答案,有例子:
反应
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/
其他回答
ReactJS是一个javascript库,用于构建web界面。你需要一个像webpack这样的捆绑器,并尝试安装你建立网站所需的模块。
React Native是一个javascript框架,它包含了编写多平台应用程序(如iOS或Android)所需的一切。你需要安装xcode和android studio来构建和部署你的应用。
与ReactJS不同,React-Native不使用HTML,而是使用类似的组件,你可以跨ios和android来构建你的应用程序。这些组件使用真正的本地组件来构建ios和android应用程序。因此,React-Native应用程序感觉真实,不像其他混合开发平台。组件还增加了代码的可重用性,因为你不需要在ios和android上再次创建相同的用户界面。
一个简单的比较应该是
反应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
总结:React.js用于Web开发,而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是一个Javascript库,用于构建像Facebook这样的大型/小型界面web应用程序。
REACT NATIVE是一个Javascript框架,用于开发Android、IOS和Windows Phone上的原生移动应用程序。
两者都是由Facebook开源的。
推荐文章
- 我如何检查如果一个变量是JavaScript字符串?
- 如何检测如果多个键被按下一次使用JavaScript?
- 如何通过history. pushstate获得历史变化的通知?
- 使用jQuery改变输入字段的类型
- 在JavaScript中,什么相当于Java的Thread.sleep() ?
- 使用jQuery以像素为整数填充或边距值
- 检查是否选择了jQuery选项,如果没有选择默认值
- TypeScript错误:属性“X”在类型“Window”上不存在
- Next.js React应用中没有定义Window
- 如何重置笑话模拟函数调用计数之前,每次测试
- 如何强制一个功能React组件渲染?
- 反应-正确的方式传递表单元素的状态兄弟/父元素?
- 在javascript中从平面数组构建树数组
- 将Dropzone.js与其他字段集成到现有的HTML表单中
- 如何在AngularJS中观察路由变化?