我已经开始学习React出于好奇,想知道React和React Native之间的区别-虽然不能找到一个满意的答案使用谷歌。React和React Native似乎有相同的格式。它们的语法完全不同吗?


当前回答

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

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

其他回答

简单来说 ReactJS是父库,它返回一些东西来渲染每个主机环境(浏览器,移动,服务器,桌面等)。 除了渲染,它还提供了其他方法,如生命周期钩子..等。

在浏览器中,它使用另一个库react-dom来呈现DOM元素。 在移动端,它使用React-Native组件来呈现特定平台(IOS和Android)的本地UI组件。 所以,

React + React -dom = web开发

React + React -native =移动开发

我们无法准确地比较它们。用例中存在差异。

(2018更新)


反应

React的主要关注点是Web开发。

React’s virtual DOM is faster than the conventional full refresh model, since the virtual DOM refreshes only parts of the page. You can reuse code components in React, saving you a lot of time. (You can in React Native too.) As a business: The rendering of your pages completely, from the server to the browser will improve the SEO of your web app. It improves the debugging speed making your developer’s life easier. You can use hybrid mobile app development, like Cordova or Ionic, to build mobile apps with React, but is more efficiently building mobile apps with React Native from many points.


反应本地

React的扩展,针对移动开发。

Its main focus is all about Mobile User Interfaces. iOS & Android are covered. Reusable React Native UI components & modules allow hybrid apps to render natively. No need to overhaul your old app. All you have to do is add React Native UI components into your existing app’s code, without having to rewrite. Doesn't use HTML to render the app. Provides alternative components that work in a similar way, so it wouldn't be hard to understand them. Because your code doesn’t get rendered in an HTML page, this also means you won’t be able to reuse any libraries you previously used with React that renders any kind of HTML, SVG or Canvas. React Native is not made from web elements and can’t be styled in the same way. Goodbye CSS Animations!


希望我帮到你了:)

为了回应上面@poshest的评论,这里有一个React Native版本的时钟代码,之前在React中发布(抱歉,我无法直接评论这部分,否则我会在那里添加代码):

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>标记。

React is a framework for building applications using JavaScript. React Native is an entire platform allowing you to build native, cross-platform mobile apps, and React.js is a JavaScript library you use for constructing a high performing UI layer. React.js is the heart of React Native, and it embodies all React’s principles and syntax, so the learning curve is easy. The platform is what gave rise to their technical differences. Like the browser code in React is rendered through Virtual DOM while React Native uses Native API’s to render components on mobile. React uses HTML and with React Native, you need to familiarize yourself with React Native syntax. React Native doesn’t use CSS either. This means you’ll have to use the animated API which comes with React Native to animate different components of your application.

最重要的是,React是为你的web界面构建动态,高性能,响应性UI的理想选择,而React Native是为了给你的移动应用程序一个真正的原生感觉。

雷夫:what-is-the-difference-between-react-js-and-react-native

这里有一个很好的解释:

Reactjs是一个同时支持前端和服务器的JavaScript库。此外,它还可以用于为移动应用程序和网站创建用户界面。

React Native是一个跨平台的移动框架,使用Reactjs来构建应用程序和网站。React Native编译成本地应用程序组件,使程序员能够用JavaScript构建可以在不同平台(如Windows、Android、iOS)上运行的移动应用程序。

Reactjs can be described as a base derivative of React DOM, for the web platform while React Native is a base derivative in itself, which means that the syntax and workflow remain the same, but components alter. Reactjs, eventually, is a JavaScript library, which enables the programmer to create an engaging and high performing UI Layer while React Native is an entire framework for building cross-platform apps, be it web, iOS or Android. In Reactjs, virtual DOM is used to render browser code in Reactjs while in React Native, native APIs are used to render components in mobile. The apps developed with Reactjs renders HTML in UI while React Native uses JSX for rendering UI, which is nothing but javascript. CSS is used for creating styling in Reactjs while a stylesheet is used for styling in React Native. In Reactjs, the animation is possible, using CSS, just like web development while in React Native, an animated API is used for inducing animation across different components of the React Native application. If the need is to build a high performing, dynamic, and responsive UI for web interfaces, then Reactjs is the best option while if the need is to give mobile apps a truly native feeling, then React Native is the best option.

更多信息请点击:https://www.simform.com/reactjs-vs-reactnative/