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


当前回答

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

反应

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 Native是为移动应用程序,而React是为网站(前端)。这两个框架都是Facebook发明的。React Native是一个跨平台的开发框架,这意味着你可以为IOS和Android编写几乎相同的代码,而且它可以工作。我个人对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!


希望我帮到你了:)

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

反应本地

它是一个使用JavaScript构建本地应用程序的框架。 它编译为本地应用程序组件,这使它成为可能 构建原生移动应用程序。 不需要彻底检查你的旧应用程序。你所要做的就是添加React 将本地UI组件添加到现有应用程序代码中,而不必这样做 重写。

js的反应

它既支持前端web,也支持在服务器上运行 构建用户界面和web应用程序。 它还允许我们创建可重用的UI组件。 你可以在React JS中重用代码组件,节省大量时间。

一个简单的比较应该是

反应Js

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

反应本地

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

React Native没有像div, p, h1等Html元素,相反,它有对移动设备有意义的组件。 详情见https://reactnative.dev/docs/components-and-apis