React Native和React有什么区别?

925

出于好奇我开始学习React,并想知道React和React Native的区别-尽管使用Google找不到令人满意的答案。React和React Native似乎具有相同的格式。它们是否具有完全不同的语法?


110
很多人在被问及这个问题时都给出了一个字典式的回答,而大多数人只是想知道它们是否可以互换使用:在将 React 代码移植到 React Native 上有多容易?如果你想在 iPad 上使用它,你需要将 Web 应用程序的前端重写为不同的 React 代码吗?它们之间有何不同? - Lawrence Weru
39
React Native 可以构建适用于 iOS、Android 和 Windows Mobile 的移动应用程序,你可以编译并放置在应用商店供用户安装。而 ReactJS 用于构建网页,用于在 web 浏览器中使用。两者都使用可重用组件,但是用于呈现组件中元素的语法(使用 JSX)是不同的。React JSX 渲染类似于 HTML 的组件,例如 <h1><p> 等,而 React Native 则渲染原生应用程序视图组件,例如 <View><Text><Image><ScrollView>,因此除非重新制作/替换所有元素,否则无法直接重用 UI 组件代码。 - Ira Herman
React是一个用于开发Web应用程序前端的JavaScript库。React Native用于移动应用程序。 - subhashis
45个回答

3

一个简单的比较应该是

ReactJs(React JavaScript库)

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

React Native

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

React Native没有像divph1等Html元素,相反它有适合移动设备的组件。
更多细节请参见https://reactnative.dev/docs/components-and-apis


2
  • React Native是一个开源的移动应用框架。
  • React JS是前端JavaScript库,它是一个庞大的库而不是框架。

2

这是一种混合工具,可用于开发适用于iOS和Android操作系统的应用程序。您不必重复编写两次代码。 它使用本地组件和React技术。 它还提供了访问服务器 (Firebase) 的权限。 如需进一步帮助,请查看以下链接: https://reactnative.dev/ https://nativebase.io/


2

React Native是一个使用React构建Android和iOS应用的框架。而React是一种用于构建精美网站的Web框架。


2
React是一个使用JavaScript构建应用程序的框架。React Native是一个完整的平台,允许您构建本地跨平台移动应用程序,而React.js是一个JavaScript库,用于构建高性能UI层。React.js是React的核心,它体现了所有React的原则和语法,因此学习曲线很容易。这个平台是导致它们技术差异的原因。就像在React中浏览器代码通过虚拟DOM呈现一样,而React Native使用本机API在移动设备上呈现组件。React使用HTML,而在React Native中,您需要熟悉React Native语法。React Native也不使用CSS。这意味着您将不得不使用随React Native提供的animated API来动画化应用程序的不同组件。
总之,React非常适合为Web界面构建动态、高性能、响应式UI,而React Native旨在为您的移动应用程序提供真正的本地感觉。
参考:what-is-the-difference-between-react-js-and-react-native

2

React本质上是由Facebook自主开发的。它实际上在2013年进入了技术世界。React是一个JS库,而不是框架。React最显著的一点是能够同时创建前端和后端。

React Native只是一个移动开发平台。在React Native之前,您需要了解Java(适用于Android)或Objective-C(适用于iPhone和iPad)才能创建本地React应用程序:简而言之,React是Webdev技术,而React-Native则是Mobildev技术。


2

React 用于在浏览器中工作的 Web 应用程序。 React Native 用于在移动应用程序中工作的 Android 和 IOS 应用程序。


2

React-Native 是一个跨平台的技术,使用 reactjs 来构建应用程序,可以在所有平台上使用相同的代码,例如(iOS、Android、Web、Windows、Mac、Linux)。

实现的区别在于,reactjs 使用 HTML 标签,而 react-native 使用特定的组件。


2
作为回应上面@poshest的评论,这里是之前在React中发布的Clock代码的React Native版本(抱歉,我无法直接评论该部分,否则我会在那里添加代码):

React Native 代码示例

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

请注意,样式完全是我的选择,不会直接复制 React 代码中使用的 <h1><h2> 标签。

1

ReactJS使用React-DOM而不是浏览器DOM,而React Native使用虚拟DOM,但两者使用相同的语法。即如果您可以使用ReactJS,则可以使用React Native。因为您在ReactJS中使用的大多数库都可以在React Native中使用,例如您的React Navigation和其他常见库它们共有。


简短回答是,React Native 可以构建适用于 iOS、Android 和 Windows Mobile 的移动应用程序,您可以编译并将其放入应用商店供用户安装。Reactjs 用于构建在 web 浏览器中使用的网页。两者都使用可重用组件,但您在组件中呈现元素所使用的语法(使用JSX)是不同的。React JSX 呈现类似于 <h1><p> 等的 HTML 组件。而 React Native 则呈现本地应用视图组件,如 <View><Text> - Ira Herman

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接