聚会有点晚了，但这里有一个更全面的示例答案：
反应
React 是一个基于组件的 UI 库，它使用“shadow 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 是通用 React 应用程序的框架和平台。它是一组围绕 React Native 和原生平台构建的工具和服务，可帮助您在 iOS、Android 和 Web 应用上开发、构建、部署和快速迭代
注意：在使用 Expo 时，您只能使用他们提供的 Native 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,
},
});
区别：
- 请注意，渲染之外的所有内容都可以保持不变，这就是为什么业务逻辑/生命周期逻辑代码可以跨 React 和 React Native 重用的原因
- 在 React Native 中，所有组件都需要从 react-native 或其他 UI 库中导入
- 使用映射到本机组件的某些 API 通常比尝试在 javascript 端处理所有内容具有更高的性能。前任。映射组件以构建列表与使用平面列表
- 细微差别：
onClick 之类的东西变成了onPress，React Native 使用样式表以更高效的方式定义样式，而 React Native 使用 flexbox 作为默认布局结构来保持响应。
- 由于 React Native 中没有传统的“DOM”，因此只能在 React 和 React Native 之间使用纯 JavaScript 库
React360
还值得一提的是，React 还可以用于开发 3D/VR 应用程序。组件结构与 React Native 非常相似。 https://facebook.github.io/react-360/