下面是React项目。

在Facebook，他们发明了React，这样JavaScript就可以使用虚拟DOM模型更快地操作网站DOM。

DOM完全刷新比React虚拟DOM模型慢，后者只刷新页面的一部分(即部分刷新)。

正如你从这个视频中了解到的，Facebook并没有发明React，因为他们立即意识到部分刷新会比传统的更快。最初，他们需要一种方法来减少Facebook应用程序的重建时间，幸运的是，这带来了部分DOM刷新。

React native只是React的结果。它是一个使用JavaScript构建原生应用程序的平台。

在使用React native之前，你需要掌握Java或Kotlin(适用于Android)， Swift或Objective-C(适用于iPhone和iPad)来创建原生应用。

使用React Native，可以在JavaScript中模仿原生应用程序的行为，最终，你将得到特定于平台的代码作为输出。如果需要进一步优化应用程序，甚至可以混合使用本机代码和JavaScript。

正如Olivia Bishop在视频中所说，85%的React原生代码库可以在平台之间共享。这些将是应用程序通常使用的组件和公共逻辑。

15%的代码是平台特定的。特定于平台的JavaScript赋予了平台特色(并使体验有所不同)。

最酷的事情是这个特定于平台的代码已经编写好了，所以您只需要使用它。

有点晚了，但这里有一个更全面的答案，有例子:

反应

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/

反应:

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是一个声明性的、高效的、灵活的JavaScript库，用于构建用户界面。你的组件告诉React你想要呈现什么——然后当你的数据发生变化时，React会有效地更新并呈现正确的组件。这里，ShoppingList是一个React组件类，或者React组件类型。

React Native应用程序是真正的移动应用程序。使用React Native，你不需要构建“移动web应用程序”、“HTML5应用程序”或“混合应用程序”。你构建了一个真正的移动应用，它与使用Objective-C或Java构建的应用没有什么区别。React Native使用与常规iOS和Android应用相同的基本UI构建块。

更多信息

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的快速差异/相似之处。

至于组件的生命周期和所有其他功能，基本上都是一样的。

区别主要在于使用的JSX标记。React使用了一个类似html的格式。另一个是react-native用来显示视图的标记。