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


当前回答

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

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

React + React -dom = web开发

React + React -native =移动开发

其他回答

REACT是一个Javascript库,用于构建像Facebook这样的大型/小型界面web应用程序。

REACT NATIVE是一个Javascript框架,用于开发Android、IOS和Windows Phone上的原生移动应用程序。

两者都是由Facebook开源的。

简单地说,React和React native遵循相同的设计原则,除了在设计用户界面的情况下。

React本机有一组单独的标记来定义user 但是两者都使用JSX来定义组件。 这两个系统的主要目的是开发可重用的ui组件,并通过其组合减少开发工作。 如果你正确地规划和构建代码,你可以在移动和web上使用相同的业务逻辑

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

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

反应

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和React-native之间的主要区别是React带有基于Web的UI组件,而React native则带有与移动相关的UI小部件,其余一切几乎相似。

下面是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赋予了平台特色(并使体验有所不同)。

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