📜  React Native 和 React 有什么区别?

📅  最后修改于: 2022-05-13 01:56:32.073000             🧑  作者: Mango

React Native 和 React 有什么区别?

React 或 ReactJS 的基本介绍:它是 Facebook 创建的一个开源 Javascript 库,用于更好的 UI 开发和高效的 DOM 操作。 React 有一个虚拟 DOM 的概念。当从服务器接收到任何数据时,这个虚拟 DOM 会相应地进行修改,然后这个更新的虚拟 DOM 通过某种算法与真实 DOM 匹配,并且只有真实 DOM 的那些与虚拟DOM不同的部分被更新。

反应JS

  1. React 用于创建网站、Web 应用程序、SPA 等。
  2. React 是一个用于创建 UI 层次结构的 Javascript 库。
  3. 它负责UI组件的渲染,它被认为是MVC框架的V部分。
  4. React 的虚拟 DOM 比传统的全刷新模型更快,因为虚拟 DOM 只刷新页面的一部分,从而减少了页面刷新时间。
  5. React 使用组件作为 UI 的基本单元,可以重复使用,从而节省编码时间。
  6. 简单易学。

反应示例代码

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
  
// every component is created by 
// extending the React Component class. 
class Clock extends React.Component { 
  constructor(props) {
    super(props);
    // constructor creates an instance of this class.
    this.state = {date: new Date()};
  }
  
  componentDidMount() {
  // this function is called immediately 
  // after component is mounted on DOM.
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }
  
  componentWillUnmount() {
  // called before component will unmount from DOM.
    clearInterval(this.timerID);
  }
  
  tick() {
  // this function is used to update the 
  // state of Clock component.
    this.setState({
      date: new Date()
    });
  }
  
  render() {
    return (
      
        

Today Date and Time

        

It is {this.state.date.toLocaleTimeString()}.

      
    );   } } // code will not run needs specific environment setup ReactDOM.render(   ,   document.getElementById('root') );

React Native 基本介绍:
REACT Native 可帮助您仅使用 JavaScript 创建真实且令人兴奋的移动应用程序,它同时支持 Android 和 iOS 平台设备。只需编写一次代码,即可在 iOS 和 Android 平台上使用 REACT Native 应用程序,这有助于节省大量开发时间。发现由 Facebook 创造的巨大人气。 REACT Native,今天拥有巨大的社区支持。 React Native 建立在 ReactJS 之上,它是 AngularJS 的一个很好的替代品。尽管 React Native 和 ReactJS 之间有一些相似之处和不同之处。
反应原生

  1. React Native 是一个用于创建跨平台 Native 应用程序的框架。这意味着您可以创建本机应用程序,并且相同的应用程序将在 Android 和 ios 上运行。
  2. React Native 拥有 ReactJS 的所有优点
  3. React native 允许开发人员以 web 风格的方式创建原生应用程序。
  4. 前端开发人员可以轻松成为移动开发人员。

示例 React Native 代码

import React, { Component } from 'react';
import { Text, View } from 'react-native';
  
class ReactNative extends Component {
  render() {
    return (
      // it is a container, layout support with flexbox think 
      // of it like a div with a container class.
      
        // A react component for displaying text.
          If you like React on the web, you'll like React Native.
        
        
          You just use native components like 'View' and 'Text',
          instead of web components like 'div' and 'span'.
        
      
    );
  }
}