Javascript React Native和React之间有什么区别？

出于好奇，我开始学习React，并想知道React和React Native之间的区别——尽管使用谷歌无法找到令人满意的答案。React和React Native的格式似乎相同。它们有完全不同的语法吗？

是一个JavaScript库，支持前端web和在服务器上运行，用于构建用户界面和web应用程序。它遵循可重用组件的概念

是一个移动框架，它利用主机上可用的JavaScript引擎，允许您使用JavaScript为不同平台（iOS、Android和Windows mobile）构建移动应用程序，允许您使用ReactJS构建可重用组件并与本机组件通信

两者都遵循JavaScript的JSX语法扩展。编译为

React.createElement

在引擎盖下调用

---

两者都是由Facebook开源的。

ReactJS是一个用于构建UI组件层次结构的框架。每个组件都有状态和道具。数据通过道具从顶层流向底层组件。使用事件处理程序在顶级组件中更新状态

---

React native使用React框架为移动应用程序构建组件。React native为iOS和Android平台提供了一组基本组件。React Native中的一些组件包括导航器、选项卡栏、文本、文本输入、视图和滚动视图。这些组件在内部使用本机iOS UIKit和Android UI组件。React-native还允许使用NativeModule，在JavaScript中可以使用ObjectiveC for iOS和Java for Android编写的代码。

React-Js是一个JavaScript库，您可以使用React开发和运行更快的web应用程序

---

React Native允许您仅使用JavaScript构建移动应用程序，它用于移动应用程序开发。此处的更多信息

React Native是一个框架，其中React JS是一个javascript库，可用于您的网站

React native提供默认的核心组件（图像、文本），其中React提供一组组件并使它们协同工作

React Native是一个开发Android和iOS应用程序的框架，它共享80%-90%的Javascript代码 而React.js是用于开发web应用程序的父Javascript库

当您在React Native中频繁使用

，

等标记时，React.js会使用

等web html标记，它们只是web/mobile开发词典中的同义词

对于React.js，您需要DOM来呈现html标记的路径，而对于移动应用程序：React Native使用AppRegistry来注册您的应用程序

---

我希望这是对React.js和React Native之间的快速差异/相似性的简单解释。

简单来说，React和React Native遵循相同的设计原则，但在设计用户界面时除外

React native有一组单独的标记用于定义用户 接口，但两者都使用JSX来定义组件

这两个系统的主要目的都是开发可重用的UI组件，并通过其组合减少开发工作量

如果您正确地规划和构造代码，您可以对移动和web使用相同的业务逻辑

---

无论如何，它是一个为移动和网络构建用户界面的优秀库。

反应：

---

React是一个声明性、高效且灵活的JavaScript库，用于 构建用户界面。

反应本机：

反应本机让你 仅使用JavaScript构建移动应用程序。它采用了与之相同的设计 React，让您从声明性 组件。
使用React Native，您不会构建“移动web应用程序”， “HTML5应用程序”或“混合应用程序”。你构建了一个真正的移动应用程序 与使用Objective-C或Java构建的应用程序无法区分。反应 本机使用与常规iOS和iOS相同的基本UI构建块 Android应用程序。您只需使用 JavaScript和React。
React Native可以让您更快地构建应用程序。 您可以立即重新加载应用程序，而无需重新编译。热的 重新加载时，您甚至可以在保留应用程序的同时运行新代码 国家。试一试——这是一次神奇的体验。
与使用Objective-C、Java或 敏捷的如果需要进行优化，可以很容易地使用本机代码 应用程序的几个方面。它也很容易构建一部分 您的应用程序为React Native，部分应用程序使用本机代码 直接-这就是Facebook应用程序的工作原理

因此，基本上，React是用于查看web应用程序的UI库，使用javascript和JSX，React native是React顶部的一个额外库，用于为

iOS

和

Android

设备制作本机应用程序。

反应代码示例：

import React，{Component}来自'React'；
从“react dom”导入react dom；
类时钟扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={date:new date（）}；
}
componentDidMount（）{
this.timerID=setInterval(
（）=>这个。勾选（），
1000
);
}
组件将卸载（）{
clearInterval（this.timerID）；
}
勾选（）{
这是我的国家({
日期：新日期（）
});
}
render（）{
返回(
你好，世界！
它是{this.state.date.toLocaleTimeString（）}。
);
}
}
ReactDOM.render(
,
document.getElementById（'root'））
);

React Native代码示例：

import React，{Component}来自'React'；
从“react native”导入{Text，View}；
类WhyReactNativeIsSoGreat扩展组件{
render（）{
雷图
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);

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'));

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,
    },
});

return(
    <div>
      <p>Hello World</p>
    </div>
)

return(
    <View>
      <Text>Hello World</Text>
    </View>
)