Sự khác biệt giữa React Native và React là gì?

804
shiva kumar 2016-01-07 09:51.

Tôi bắt đầu tìm hiểu React vì tò mò và muốn biết sự khác biệt giữa React và React Native - mặc dù không thể tìm thấy câu trả lời thỏa đáng khi sử dụng Google. React và React Native dường như có cùng một định dạng. Chúng có cú pháp hoàn toàn khác nhau không?

30 answers

847
Nader Dabit 2016-01-07 10:04.

ReactJS là một thư viện JavaScript, hỗ trợ cả web front-end và được chạy trên máy chủ, để xây dựng giao diện người dùng và ứng dụng web. Nó tuân theo khái niệm về các thành phần có thể tái sử dụng.

React Native là một khung công tác di động sử dụng công cụ JavaScript có sẵn trên máy chủ, cho phép bạn xây dựng các ứng dụng di động cho các nền tảng khác nhau (iOS, Android và Windows Mobile) bằng JavaScript cho phép bạn sử dụng ReactJS để xây dựng các thành phần có thể sử dụng lại và giao tiếp với giải thích thêm về các thành phần gốc

Cả hai đều tuân theo phần mở rộng cú pháp JSX thành JavaScript. Mà biên dịch thành React.createElementcác cuộc gọi ẩn. JSX chuyên sâu

Cả hai đều có nguồn mở bởi Facebook.

142
Alireza 2017-04-18 16:07.

Phản ứng:

React là một thư viện JavaScript khai báo, hiệu quả và linh hoạt để xây dựng giao diện người dùng.

React Native:

React Native cho phép bạn tạo ứng dụng di động chỉ sử dụng JavaScript. Nó sử dụng thiết kế tương tự như React, cho phép bạn tạo giao diện người dùng di động phong phú từ các thành phần khai báo.
Với React Native, bạn không tạo “ứng dụng web di động”, “ứng dụng HTML5” hay “ứng dụng kết hợp”. Bạn xây dựng một ứng dụng di động thực sự không thể phân biệt được với một ứng dụng được tạo bằng Objective-C hoặc Java. React Native sử dụng các khối xây dựng giao diện người dùng cơ bản giống như các ứng dụng iOS và Android thông thường. Bạn chỉ cần ghép các khối xây dựng đó lại với nhau bằng JavaScript và React.
React Native cho phép bạn xây dựng ứng dụng của mình nhanh hơn. Thay vì biên dịch lại, bạn có thể tải lại ứng dụng của mình ngay lập tức. Với tính năng tải lại nóng, bạn thậm chí có thể chạy mã mới trong khi vẫn giữ nguyên trạng thái ứng dụng của mình. Hãy thử - đó là một trải nghiệm kỳ diệu.
React Native kết hợp nhuần nhuyễn với các thành phần được viết bằng Objective-C, Java hoặc Swift. Thật đơn giản để thả xuống mã gốc nếu bạn cần tối ưu hóa một số khía cạnh của ứng dụng của mình. Cũng dễ dàng tạo một phần ứng dụng của bạn trong React Native và một phần ứng dụng của bạn bằng cách sử dụng mã gốc trực tiếp - đó là cách ứng dụng Facebook hoạt động.

Vì vậy, về cơ bản React là thư viện giao diện người dùng cho chế độ xem ứng dụng web của bạn, sử dụng javascriptJSX , React native là một thư viện bổ sung trên đầu React, để tạo ứng dụng gốc cho iOSAndroidthiết bị.

Mẫu mã phản ứng :

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class Clock extends React.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 (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);


Mẫu mã React Native :

import React, { Component } from 'react';
import { Text, View } from 'react-native';

class WhyReactNativeIsSoGreat extends Component {
  render() {
    return (
      <View>
        <Text>
          If you like React on the web, you'll like React Native.
        </Text>
        <Text>
          You just use native components like 'View' and 'Text',
          instead of web components like 'div' and 'span'.
        </Text>
      </View>
    );
  }
}

Để biết thêm thông tin về React , hãy truy cập trang web chính thức của họ được tạo bởi nhóm facebook:

https://facebook.github.io/react

Để biết thêm thông tin về React Native , hãy truy cập trang web React native bên dưới:

https://facebook.github.io/react-native

63
vijayst 2016-08-20 18:13.

ReactJS là một khuôn khổ để xây dựng một hệ thống phân cấp của các thành phần UI. Mỗi thành phần có trạng thái và đạo cụ. Dữ liệu chảy từ các thành phần cấp cao nhất đến cấp thấp thông qua các đạo cụ. Trạng thái được cập nhật trong thành phần cấp cao nhất bằng cách sử dụng trình xử lý sự kiện.

React native sử dụng React framework để xây dựng các thành phần cho ứng dụng di động. React native cung cấp một bộ thành phần cơ bản cho cả hai nền tảng iOS và Android. Một số thành phần trong React Native là Navigator, TabBar, Text, TextInput, View, ScrollView. Các thành phần này sử dụng các thành phần UIKit iOS và Android UI gốc bên trong. React native cũng cho phép NativeModules nơi mã được viết bằng ObjectiveC cho iOS và Java cho Android có thể được sử dụng trong JavaScript.

57
Ryo-code 2018-07-15 09:53.

Đầu tiên, điểm tương đồng: Cả React & React Native (RN) đều được thiết kế để tạo ra các giao diện người dùng linh hoạt. Có rất nhiều lợi ích cho các khung công tác này, nhưng điểm cơ bản nhất là chúng được tạo ra để phát triển giao diện người dùng. Facebook đã phát triển RN một vài năm sau React.

React: Facebook đã thiết kế khung công tác này gần giống như viết JavaScript bên trong HTML / XML của bạn, đó là lý do tại sao các thẻ được gọi là " JSX " (JavaScript XML) và tương tự như các thẻ giống HTML quen thuộc như <div>hoặc <p>. Một đặc điểm nổi bật của React là các thẻ viết hoa biểu thị một thành phần tùy chỉnh, chẳng hạn như <MyFancyNavbar />, cũng tồn tại trong RN. Tuy nhiên, React sử dụng DOM . DOM tồn tại cho HTML, do đó React được sử dụng để phát triển web.

React Native: RN không sử dụng HTML và do đó không được sử dụng để phát triển web. Nó được sử dụng cho ... hầu như mọi thứ khác! Phát triển thiết bị di động (cả iOS và Android), thiết bị thông minh (ví dụ: đồng hồ, TV), thực tế tăng cường, v.v. Vì RN không có DOM để tương tác, thay vì sử dụng cùng một loại thẻ HTML được sử dụng trong React, nó sử dụng các thẻ sau đó được biên dịch sang các ngôn ngữ khác. Ví dụ: thay vì các <div>thẻ, các nhà phát triển RN sử dụng <View>thẻ tích hợp của RN, thẻ này sẽ biên dịch thành mã gốc khác bên trong (ví dụ: android.viewtrên Android; và UIViewtrên iOS).

Tóm lại: chúng rất giống nhau (để phát triển giao diện người dùng) nhưng được sử dụng cho các phương tiện khác nhau.

44
Анураг Пракаш 2017-03-10 21:51.
  1. React-Native là một framework để phát triển các ứng dụng Android & iOS, chia sẻ 80% - 90% mã Javascript.

Trong khi React.js là một thư viện Javascript mẹ để phát triển các ứng dụng web.

  1. Trong khi bạn sử dụng các thẻ như <View>, <Text>rất thường xuyên trong React-Native, React.js sử dụng các thẻ html web như <div> <h1> <h2>, đây chỉ là những từ đồng nghĩa trong từ điển phát triển web / di động.

  2. Đối với React.js, bạn cần DOM để hiển thị đường dẫn của các thẻ html, trong khi đối với ứng dụng di động: React-Native sử dụng AppRegistry để đăng ký ứng dụng của bạn.

Tôi hy vọng đây là một lời giải thích dễ hiểu cho những điểm khác biệt / tương đồng nhanh chóng trong React.js và React-Native.

34
Adrian Gheorghe 2018-09-21 10:57.

Chúng tôi không thể so sánh chúng một cách chính xác. Có sự khác biệt trong trường hợp sử dụng .

(Bản cập nhật 2018)


ReactJS

React là trọng tâm chính của nó là Phát triển Web.

    • DOM ảo của React nhanh hơn so với mô hình làm mới đầy đủ thông thường , vì DOM ảo chỉ làm mới các phần của trang.
    • Bạn có thể sử dụng lại các thành phần mã trong React, tiết kiệm rất nhiều thời gian. (Bạn cũng có thể trong React Native.)
    • Với tư cách là một doanh nghiệp: Việc hiển thị hoàn toàn các trang của bạn, từ máy chủ đến trình duyệt sẽ cải thiện SEO cho ứng dụng web của bạn .
    • cải thiện tốc độ gỡ lỗi giúp cuộc sống của nhà phát triển của bạn dễ dàng hơn.
    • Bạn có thể sử dụng phát triển ứng dụng di động kết hợp, như Cordova hoặc Ionic, để tạo ứng dụng di động với React, nhưng hiệu quả hơn là xây dựng ứng dụng di động với React Native từ nhiều điểm.

React Native

Một phần mở rộng của React , dành cho Phát triển Di động.

    • Trọng tâm chính của nó là tất cả về Giao diện người dùng di động .
    • iOS và Android được bảo hiểm.
    • Các thành phần & mô-đun giao diện người dùng React Native có thể tái sử dụng cho phép các ứng dụng kết hợp hiển thị nguyên bản.
    • Không cần phải đại tu ứng dụng cũ của bạn. Tất cả những gì bạn phải làm là thêm các thành phần React Native UI vào mã ứng dụng hiện có của bạn mà không cần phải viết lại.
    • Không sử dụng HTML để hiển thị ứng dụng . Cung cấp các thành phần thay thế hoạt động theo cách tương tự, vì vậy sẽ không khó để hiểu chúng.
    • Vì mã của bạn không được hiển thị trong trang HTML, điều này cũng có nghĩa là bạn sẽ không thể sử dụng lại bất kỳ thư viện nào bạn đã sử dụng trước đó với React để hiển thị bất kỳ loại HTML, SVG hoặc Canvas nào.
    • React Native không được tạo từ các phần tử web và không thể được tạo kiểu theo cùng một cách. Tạm biệt CSS Animations!

Hy vọng rằng tôi đã giúp bạn :)

21
Manzoor Samad 2017-04-04 06:05.

Theo nghĩa đơn giản, React và React native tuân theo các nguyên tắc thiết kế giống nhau, ngoại trừ trường hợp thiết kế giao diện người dùng.

  1. React native có một bộ thẻ riêng để xác định giao diện người dùng cho thiết bị di động, nhưng cả hai đều sử dụng JSX để xác định các thành phần.
  2. Mục đích chính của cả hai hệ thống là phát triển các thành phần giao diện người dùng có thể tái sử dụng và giảm nỗ lực phát triển bởi các thành phần của nó.
  3. Nếu bạn lập kế hoạch và cấu trúc mã đúng cách, bạn có thể sử dụng cùng một logic kinh doanh cho thiết bị di động và web

Dù sao, đó là một thư viện tuyệt vời để xây dựng giao diện người dùng cho thiết bị di động và web.

18
Bipon Biswas 2017-08-29 18:31.

React là một thư viện JavaScript khai báo, hiệu quả và linh hoạt để xây dựng giao diện người dùng. Các thành phần của bạn cho React biết những gì bạn muốn hiển thị - sau đó React sẽ cập nhật hiệu quả và chỉ hiển thị các thành phần phù hợp khi dữ liệu của bạn thay đổi. Ở đây, ShoppingList là một lớp thành phần React, hoặc loại thành phần React.

Ứng dụng React Native là một ứng dụng di động thực sự. Với React Native, bạn không tạo “ứng dụng web di động”, “ứng dụng HTML5” hay “ứng dụng kết hợp”. Bạn xây dựng một ứng dụng di động thực sự không thể phân biệt được với một ứng dụng được tạo bằng Objective-C hoặc Java. React Native sử dụng các khối xây dựng giao diện người dùng cơ bản giống như các ứng dụng iOS và Android thông thường.

Thêm thông tin

14
Necronet 2017-04-19 11:50.

ReactJS là một khung công tác cốt lõi, có nghĩa là để xây dựng thành phần được phân lập dựa trên mẫu phản ứng, bạn có thể coi nó như là V từ MVC, mặc dù tôi muốn nói rằng phản ứng mang lại cảm giác khác, đặc biệt nếu bạn ít quen thuộc với khái niệm phản ứng .

ReactNative là một lớp khác có nghĩa là có một thành phần thiết lập cho nền tảng Android và iOS phổ biến. Vì vậy, mã trông về cơ bản giống với ReactJS vì là ReactJS, nhưng nó tải nguyên bản trên nền tảng di động. Bạn cũng có thể kết nối API tương đối phức tạp và nền tảng hơn với Java / Objective-C / Swift tùy thuộc vào hệ điều hành và sử dụng nó trong React.

14
Ramya Ram 2017-05-23 02:05.

React Native chủ yếu được phát triển bằng JavaScript, có nghĩa là hầu hết mã bạn cần để bắt đầu có thể được chia sẻ trên các nền tảng. React Native sẽ hiển thị bằng cách sử dụng các thành phần gốc. Các ứng dụng React Native được phát triển bằng ngôn ngữ yêu cầu của nền tảng mà nó nhắm mục tiêu, Objective-C hoặc Swift cho iOS, Java cho Android, v.v. Mã được viết không được chia sẻ trên các nền tảng và hành vi của chúng khác nhau. Họ có quyền truy cập trực tiếp vào tất cả các tính năng do nền tảng cung cấp mà không có bất kỳ hạn chế nào.

React là một thư viện JavaScript mã nguồn mở do Facebook phát triển để xây dựng giao diện người dùng. Nó được sử dụng để xử lý lớp xem cho web và ứng dụng di động. ReactJS được sử dụng để tạo các thành phần UI có thể tái sử dụng, nó hiện là một trong những thư viện JavaScript phổ biến nhất trong lĩnh vực này và nó có nền tảng vững chắc và cộng đồng lớn đằng sau nó. Nếu bạn học ReactJS, bạn cần phải có kiến ​​thức về JavaScript, HTML5 và CSS.

13
Sharlon M. Balbalosa 2017-05-15 16:15.

React là phần trừu tượng cơ bản của React NativeReact DOM , vì vậy nếu bạn muốn làm việc với React Native, bạn cũng sẽ cần React ... giống như trên web nhưng thay vì React Native, bạn sẽ cần React DOM.

Vì React là phần trừu tượng cơ sở nên cú pháp chung và quy trình làm việc giống nhau nhưng các thành phần mà bạn sẽ sử dụng rất khác nhau, do đó bạn sẽ cần phải tìm hiểu những điểm khác biệt đó, điều này nội tuyến với React nên được gọi là moto là "Học một lần viết ở bất kỳ đâu" bởi vì nếu bạn biết React (trừu tượng cơ sở), bạn có thể chỉ cần tìm hiểu sự khác biệt giữa các nền tảng mà không cần học ngôn ngữ lập trình, cú pháp và quy trình làm việc khác.

12
iPragmatech 2017-03-07 02:25.

React-Native là một khuôn khổ, trong đó ReactJS là một thư viện javascript mà bạn có thể sử dụng cho trang web của mình.

React-native cung cấp các thành phần cốt lõi mặc định (hình ảnh, văn bản), nơi React cung cấp một loạt các thành phần và làm cho chúng hoạt động cùng nhau.

11
Nischith 2017-03-03 02:46.

React Js là một Thư viện Javascript nơi bạn có thể phát triển và chạy các ứng dụng web nhanh hơn bằng cách sử dụng React.

React Native cho phép bạn tạo ứng dụng di động chỉ sử dụng JavaScript, nó được sử dụng để phát triển ứng dụng dành cho thiết bị di động. thêm thông tin tại đây https://facebook.github.io/react-native/docs/getting-started.html

10
Scott Blanch 2017-07-26 10:12.

Liên quan đến vòng đời linh kiện và tất cả các chuông và còi khác, nó hầu như giống nhau.

Sự khác biệt chủ yếu là đánh dấu JSX được sử dụng. React sử dụng một cái tương tự như html. Loại còn lại là đánh dấu được sử dụng bởi react-native để hiển thị chế độ xem.

10
S. Sinha 2017-08-09 13:29.

React Native dành cho các ứng dụng di động trong khi React dành cho các trang web (front-end). Cả hai đều là framework do Facebook phát minh. React Native là một framework phát triển đa nền tảng, nghĩa là người ta có thể viết gần như cùng một đoạn mã cho cả IOS và Android và nó sẽ hoạt động. Cá nhân tôi biết nhiều hơn về React Native vì vậy tôi sẽ để nó ở phần này.

8
Uzama Zaid 2019-04-18 09:22.

React Js đang thao tác với HTML Dom. Nhưng React native đang thao tác với thành phần ui gốc di động (iOS / android).

7
Ashish Pisey 2018-03-15 19:23.

ReactJS là một thư viện javascript được sử dụng để xây dựng giao diện web. Bạn sẽ cần một gói như webpack và cố gắng cài đặt các mô-đun mà bạn cần để xây dựng trang web của mình.

React Native là một khung công tác javascript và nó đi kèm với mọi thứ bạn cần để viết các ứng dụng đa nền tảng (như iOS hoặc Android). Bạn sẽ cần cài đặt xcode và android studio để xây dựng và triển khai ứng dụng của mình.

Không giống như ReactJS, React-Native không sử dụng HTML mà sử dụng các thành phần tương tự mà bạn có thể sử dụng trên iOS và android để xây dựng ứng dụng của mình. Các thành phần này sử dụng các thành phần gốc thực sự để xây dựng ứng dụng ios và android. Do điều này, các ứng dụng React-Native có cảm giác thực không giống như các nền tảng phát triển Hybrid khác. Các thành phần cũng tăng khả năng tái sử dụng mã của bạn vì bạn không cần tạo lại giao diện người dùng tương tự trên iOS và android.

6
Rajender Dandyal 2019-03-16 21:43.

Nói một cách đơn giản ReactJS là thư viện mẹ trả về một thứ gì đó để hiển thị theo môi trường máy chủ (trình duyệt, thiết bị di động, máy chủ, máy tính để bàn..vv). Ngoài việc kết xuất, nó còn cung cấp các phương thức khác như móc vòng đời ..v.v.

Trong trình duyệt, nó sử dụng thư viện react-dom khác để hiển thị các phần tử DOM. Trong thiết bị di động, nó sử dụng các thành phần React-Native để hiển thị các thành phần giao diện người dùng gốc dành riêng cho nền tảng (Cả IOS và Android). VÌ THẾ,

react + react-dom = sự phát triển web

react + react-native = sự phát triển trên thiết bị di động

4
Daniel Agus Sidabutar 2018-03-27 07:50.

REACT là thư viện Javascript để xây dựng ứng dụng web giao diện lớn / nhỏ như Facebook.

REACT NATIVE là khung công tác Javascript để phát triển ứng dụng di động gốc trên Android, IOS và Windows Phone.

Cả hai đều được cung cấp bởi Facebook.

4
Matt Aft 2019-10-28 19:12.

Đến bữa tiệc hơi muộn, nhưng đây là câu trả lời toàn diện hơn với các ví dụ:

Phản ứng

React là một thư viện giao diện người dùng dựa trên thành phần sử dụng "DOM bóng" để cập nhật DOM một cách hiệu quả với những gì đã thay đổi thay vì xây dựng lại toàn bộ cây DOM cho mọi thay đổi. Ban đầu nó được xây dựng cho các ứng dụng web, nhưng bây giờ cũng có thể được sử dụng cho thiết bị di động và 3D / vr.

Không thể hoán đổi các thành phần giữa React và React Native vì React Native ánh xạ tới các phần tử giao diện người dùng di động gốc nhưng logic nghiệp vụ và mã liên quan không hiển thị có thể được sử dụng lại.

ReactDOM

Ban đầu được bao gồm trong thư viện React nhưng được tách ra khi React được sử dụng cho các nền tảng khác chứ không chỉ web. Nó đóng vai trò là điểm vào DOM và được sử dụng kết hợp với React.

Thí dụ:

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 Native là một khuôn khổ di động đa nền tảng sử dụng React và giao tiếp giữa Javascript và đối tác gốc của nó thông qua một "cầu nối". Do đó, rất nhiều cấu trúc giao diện người dùng phải khác khi sử dụng React Native. Ví dụ: khi xây dựng danh sách, bạn sẽ gặp phải các vấn đề lớn về hiệu suất nếu bạn cố gắng sử dụng mapđể xây dựng danh sách thay vì React Native FlatList. React Native có thể được sử dụng để xây dựng các ứng dụng di động IOS / Android, cũng như cho đồng hồ thông minh và TV.

Hội chợ triển lãm

Expo là bước bắt đầu khi bắt đầu một ứng dụng React Native mới.

Expo là một khuôn khổ và một nền tảng cho các ứng dụng React phổ biến. Đây là một bộ công cụ và dịch vụ được xây dựng dựa trên nền tảng React Native và gốc giúp bạn phát triển, xây dựng, triển khai và nhanh chóng lặp lại trên các ứng dụng web iOS, Android và

Lưu ý: Khi sử dụng Expo, bạn chỉ có thể sử dụng Native Api mà họ cung cấp. Tất cả các thư viện bổ sung mà bạn bao gồm sẽ cần phải là javascript thuần túy hoặc bạn sẽ cần phải loại bỏ expo.

Cùng một ví dụ sử dụng 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,
    },
});

Sự khác biệt:

  • Lưu ý rằng mọi thứ bên ngoài kết xuất có thể giữ nguyên, đây là lý do tại sao mã logic nghiệp vụ / vòng đời có thể được sử dụng lại trên React và React Native
  • Trong React Native, tất cả các thành phần cần được nhập từ react-native hoặc thư viện UI khác
  • Sử dụng một số API nhất định ánh xạ tới các thành phần gốc thường sẽ hiệu quả hơn so với việc cố gắng xử lý mọi thứ về phía javascript. Ví dụ. ánh xạ các thành phần để tạo danh sách so với sử dụng danh sách phẳng
  • Sự khác biệt tinh tế: những thứ như onClickbiến thành onPress, React Native sử dụng các bảng định kiểu để xác định kiểu theo cách hiệu quả hơn và React Native sử dụng flexbox làm cấu trúc bố cục mặc định để giữ cho mọi thứ luôn phản hồi.
  • Vì không có "DOM" truyền thống trong React Native, chỉ có thể sử dụng các thư viện javascript thuần túy trên cả React và React Native

React360

Cũng cần nhắc lại rằng React cũng có thể được sử dụng để phát triển các ứng dụng 3D / VR. Cấu trúc thành phần rất giống với React Native. https://facebook.github.io/react-360/

4
Waheed Akhtar 2020-05-10 01:04.

Tôi biết đã có rất nhiều câu trả lời cho nó nhưng sau khi đọc tất cả những điều này, tôi tin rằng chúng vẫn còn chỗ để giải thích.

Phản ứng

React = Vaila JS + ES6 + HTML + CSS = JSX

Vì vậy, hãy nói về phản ứng trước vì phản ứng gốc cũng dựa trên phản ứng và khái niệm tương tự về JS đã được sử dụng ở đó.

React là một thư viện JS được sử dụng để tạo các ứng dụng web một trang đẹp, linh hoạt, hiệu quả , Vì vậy, bây giờ một câu hỏi sẽ xuất hiện trong đầu bạn ứng dụng web một trang là gì .

Ứng dụng một trang

Ứng dụng một trang là ứng dụng hoạt động bên trong trình duyệt và không yêu cầu tải lại trang trong quá trình sử dụng. Bạn đang sử dụng loại ứng dụng này hàng ngày. Ví dụ: Gmail, Google Maps, Facebook hoặc GitHub . Các SPA đều nhằm phục vụ một UX xuất sắc bằng cách cố gắng bắt chước môi trường “tự nhiên” trong trình duyệt - không tải lại trang, không mất thêm thời gian chờ đợi. Nó chỉ là một trang web mà bạn truy cập, sau đó tải tất cả nội dung khác bằng JavaScript - thứ mà chúng phụ thuộc rất nhiều. SPA yêu cầu đánh dấu và dữ liệu một cách độc lập và hiển thị các trang ngay trong trình duyệt. Chúng ta có thể làm được điều này nhờ các khung JavaScript nâng cao như AngularJS, Ember.js, Meteor.js, Knockout.js, React.js, Vue.js. Các trang đơn giúp giữ người dùng trong một không gian web thoải mái, nơi nội dung được trình bày cho người dùng theo cách đơn giản, dễ dàng và khả thi.

Làm thế nào nó hoạt động

Bây giờ bạn đã biết SPA là gì, Như bạn biết đó là một ứng dụng web nên nó sẽ sử dụng các phần tử HTML để chạy vào trình duyệt và cũng được sử dụng JS để xử lý tất cả các chức năng liên quan đến các phần tử này. Nó sử dụng Virtual Dom để hiển thị các thay đổi mới trong các thành phần.

React-Native

Bây giờ bạn có một chút ý tưởng về phản ứng , hãy nói về phản ứng gốc

React-Native = React (Vaila JS + ES6 + Cầu nối giữa JS và mã Native) + Native (IOS, Android)

React-Native được sử dụng để tạo các ứng dụng di động đa nền tảng đẹp mắt (Android, IOS) bằng cách sử dụng React.

Làm thế nào nó hoạt động

Trong React-Native có hai luồng.

  1. Chuỗi JS

  2. Chủ đề gốc

Chuỗi JS thực hiện tất cả các phép tính và chuyển dữ liệu sang bản địa, Làm thế nào?

React sử dụng Async Bridge để truyền dữ liệu đến Native thread ở định dạng JSON được gọi là react-native

Vì vậy, chúng tôi sử dụng các thành phần Gốc để tạo một chế độ xem trình bày trong phản ứng gốc và sử dụng cầu nối đó để giao tiếp giữa hai thế giới khác nhau này.

Hãy nói về những điểm chung và khác biệt giữa hai framework này.

|---------------------|------------------|---------------------|
|      Feature        |     React        |  React-Native       |
|---------------------|------------------|---------------------|
|    Platform         |        Web       |  Android, IOS, JS   |
|---------------------|------------------|---------------------|
|   Open Source       |        Yes       |        Yes          |
|---------------------|------------------|---------------------|
| Presentational View |   HTML + CSS     | Native Components   |
|---------------------|------------------|---------------------|
|  Arichtecure        |  Virtual Dom     | Virtual Dom + Bridge|
|---------------------|------------------|---------------------|
|   Animations        | CSS Animations   | Native Animations   | 
|---------------------|------------------|---------------------|
|     Styling         |     CSS          | JS Stylesheets      |
|---------------------|------------------|---------------------|
|  Developed By       |  Facebook        |      Facebook       |
|---------------------|------------------|---------------------|
4
GOVINDARAJ 2019-12-28 23:08.

ReactJS

  • React được sử dụng để tạo trang web, ứng dụng web, SPA, v.v.

  • React là một thư viện Javascript được sử dụng để tạo hệ thống phân cấp giao diện người dùng.

  • Nó chịu trách nhiệm kết xuất các thành phần giao diện người dùng, Nó được coi là V part Of MVC framework.

  • DOM ảo của React nhanh hơn so với mô hình làm mới hoàn toàn thông thường, vì DOM ảo chỉ làm mới các phần của trang, Do đó làm giảm thời gian làm mới trang.

  • React sử dụng các thành phần làm đơn vị cơ bản của giao diện người dùng có thể được sử dụng lại, điều này giúp tiết kiệm thời gian viết mã. Đơn giản và dễ học.

    React Native

  • React Native là một khuôn khổ được sử dụng để tạo các ứng dụng Gốc đa nền tảng. Nó có nghĩa là bạn có thể tạo ứng dụng gốc và ứng dụng tương tự sẽ chạy trên Android và iOS.

  • React native có tất cả các lợi ích của ReactJS

  • React native cho phép các nhà phát triển tạo ứng dụng gốc theo cách tiếp cận kiểu web.

3
Dusty 2018-05-17 10:21.

Dưới đây là những điểm khác biệt mà tôi biết:

  1. Chúng có các thẻ html khác nhau: React Native đang sử dụng để xử lý văn bản và thay vì trong React.
  2. React Native đang sử dụng các thành phần Có thể chạm thay vì thành phần nút thông thường.
  3. React Native có các thành phần ScrollView và FlatList để hiển thị danh sách.
  4. React Native đang sử dụng AsyncStorage trong khi React đang sử dụng bộ nhớ cục bộ.
  5. Trong React Native, các bộ định tuyến hoạt động như một ngăn xếp, trong khi trong React, chúng tôi sử dụng các thành phần Định tuyến để ánh xạ điều hướng.
3
Albert A 2019-03-02 04:43.

Tóm lại: React.js để phát triển web trong khi React-Native để phát triển ứng dụng di động

3
Pankaj Gadhiya 2019-07-06 01:39.

React Js - React JS là thư viện javascript front-end, nó là thư viện lớn không phải là một khuôn khổ

  • Nó tuân theo cách tiếp cận dựa trên thành phần giúp xây dựng
    các thành phần UI có thể tái sử dụng
    • Nó được sử dụng để phát triển giao diện người dùng di động và web phức tạp và tương tác
    • Mặc dù nó chỉ có nguồn mở vào năm 2015, nó có một trong những cộng đồng lớn nhất hỗ trợ nó.

ReactNative - React Native là một khung ứng dụng di động mã nguồn mở.

2
Martin N 2019-09-13 22:55.

Đáp lại nhận xét từ Sự khác biệt giữa React Native và React là gì? ở trên, đây là phiên bản React Native của mã Clock đã được đăng trước đó trong React (xin lỗi, tôi không thể bình luận trực tiếp về phần này, nếu không tôi đã thêm mã vào đó):

Mẫu mã 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);

Lưu ý rằng kiểu dáng hoàn toàn do tôi lựa chọn và không tìm cách sao chép trực tiếp các thẻ <h1><h2>được sử dụng trong mã React.

2
Naveen 2019-10-09 08:11.

Một số khác biệt như sau:
1- React-Native là một khuôn khổ được sử dụng để tạo Ứng dụng di động, trong đó ReactJS là một thư viện javascript mà bạn có thể sử dụng cho trang web của mình.
2- React-Native không sử dụng HTML để hiển thị ứng dụng trong khi React sử dụng.
3- React-Native chỉ được sử dụng để phát triển Ứng dụng di động trong khi React sử dụng cho trang web và Di động.

2
Guilherme de Jesus Santos 2020-06-05 08:08.

Một so sánh đơn giản nên

ReactJs

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

React Native

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

Phản ứng tự nhiên là không có Html Elements như div, p, h1, vv, thay vào đó nó có các thành phần đó có ý nghĩa cho điện thoại di động.
Thông tin chi tiết tại https://reactnative.dev/docs/components-and-apis

1
solex 2019-01-17 02:57.

reactjs sử dụng react-dom không phải dom của trình duyệt trong khi react native sử dụng dom ảo nhưng cả hai sử dụng cùng một cú pháp, tức là nếu bạn có thể sử dụng reactjs thì bạn có thể sử dụng react native. vì hầu hết các thư viện bạn sử dụng trong reactjs đều có sẵn trong react native như điều hướng phản ứng của bạn và các thư viện phổ biến khác mà chúng có điểm chung.

1
heart hacker 2019-09-04 00:32.

React Native

  • Nó là một khuôn khổ để xây dựng các ứng dụng gốc sử dụng JavaScript.

  • Nó biên dịch thành các thành phần ứng dụng gốc, giúp bạn có thể tạo các ứng dụng di động gốc.

  • Không cần phải đại tu ứng dụng cũ của bạn. Tất cả những gì bạn phải làm là thêm các thành phần React Native UI vào mã ứng dụng hiện có của bạn mà không cần phải viết lại.

Phản ứng js

  • Nó hỗ trợ cả web front-end và được chạy trên máy chủ, để xây dựng giao diện người dùng và ứng dụng web.

  • Nó cũng cho phép chúng tôi tạo các thành phần UI có thể tái sử dụng.

  • Bạn có thể sử dụng lại các thành phần mã trong React JS, tiết kiệm rất nhiều thời gian.

Related questions

MORE COOL STUFF

Cate Blanchett chia tay chồng sau 3 ngày bên nhau và vẫn kết hôn với anh ấy 25 năm sau

Cate Blanchett chia tay chồng sau 3 ngày bên nhau và vẫn kết hôn với anh ấy 25 năm sau

Cate Blanchett đã bất chấp những lời khuyên hẹn hò điển hình khi cô gặp chồng mình.

Tại sao Michael Sheen là một diễn viên phi lợi nhuận

Tại sao Michael Sheen là một diễn viên phi lợi nhuận

Michael Sheen là một diễn viên phi lợi nhuận nhưng chính xác thì điều đó có nghĩa là gì?

Hallmark Star Colin Egglesfield Các món ăn gây xúc động mạnh đối với người hâm mộ tại RomaDrama Live! [Loại trừ]

Hallmark Star Colin Egglesfield Các món ăn gây xúc động mạnh đối với người hâm mộ tại RomaDrama Live! [Loại trừ]

Ngôi sao của Hallmark Colin Egglesfield chia sẻ về những cuộc gặp gỡ với người hâm mộ ly kỳ tại RomaDrama Live! cộng với chương trình INSPIRE của anh ấy tại đại hội.

Tại sao bạn không thể phát trực tuyến 'chương trình truyền hình phía Bắc'

Tại sao bạn không thể phát trực tuyến 'chương trình truyền hình phía Bắc'

Bạn sẽ phải phủi sạch đầu đĩa Blu-ray hoặc DVD để xem tại sao Northern Exposure trở thành một trong những chương trình nổi tiếng nhất của thập niên 90.

Where in the World Are You? Take our GeoGuesser Quiz

Where in the World Are You? Take our GeoGuesser Quiz

The world is a huge place, yet some GeoGuessr players know locations in mere seconds. Are you one of GeoGuessr's gifted elite? Take our quiz to find out!

8 công dụng tuyệt vời của Baking Soda và Giấm

8 công dụng tuyệt vời của Baking Soda và Giấm

Bạn biết đấy, hai sản phẩm này là nguồn điện để làm sạch, riêng chúng. Nhưng cùng với nhau, chúng có một loạt công dụng hoàn toàn khác.

Hạn hán, biến đổi khí hậu đe dọa tương lai của thủy điện Hoa Kỳ

Hạn hán, biến đổi khí hậu đe dọa tương lai của thủy điện Hoa Kỳ

Thủy điện rất cần thiết cho lưới điện của Hoa Kỳ, nhưng nó chỉ tạo ra năng lượng khi có nước di chuyển. Bao nhiêu nhà máy thủy điện có thể gặp nguy hiểm khi các hồ và sông cạn kiệt?

Quyên góp tóc của bạn để giúp giữ nước sạch của chúng tôi

Quyên góp tóc của bạn để giúp giữ nước sạch của chúng tôi

Tóc tỉa từ các tiệm và các khoản quyên góp cá nhân có thể được tái sử dụng như những tấm thảm thấm dầu và giúp bảo vệ môi trường.

Một thương hiệu kế thừa khác có được cuộc sống mới khi những người chủ mới của Black Opal có được Hội chợ thời trang

Một thương hiệu kế thừa khác có được cuộc sống mới khi những người chủ mới của Black Opal có được Hội chợ thời trang

Desiree Rogers, trái, và Cheryl Mayberry McKissack Chuyển sang, Fenty Beauty và Pat McGrath, có một đế chế làm đẹp mới do phụ nữ làm chủ đang trỗi dậy. Sau thương vụ mua lại mỹ phẩm Black Opal vào tháng 9, đội ngũ quyền lực của Giám đốc điều hành công ty Desiree Rogers và Chủ tịch Cheryl Mayberry McKissack đã thông báo mua lại thương hiệu làm đẹp tiên phong Fashion Fair từ người sáng lập Johnson Publishing Company (JPC).

Ngoài việc trở nên vô nghĩa, các bên bộc lộ giới tính giờ đây đã trở nên chết người

Ngoài việc trở nên vô nghĩa, các bên bộc lộ giới tính giờ đây đã trở nên chết người

Đối với những người có quá nhiều thời gian, tiệc tiết lộ giới tính là một cách thú vị để không cần áp đặt những định kiến ​​hạn chế lên thai nhi trước một đối tượng bạn bè giả vờ quan tâm một cách lịch sự. Tuy nhiên, việc chỉ dựa vào những chiếc bánh nướng có màu nhân tạo để biểu thị một tiếng hoo-ha hoặc một đứa trẻ đi tè đã trở nên xa xỉ trong các bậc cha mẹ trên Instagram.

Kirstjen Nielsen đang cố gắng đổi mới bản thân với tư cách là một người phụ nữ 'nói ra sự thật cho sức mạnh'

Kirstjen Nielsen đang cố gắng đổi mới bản thân với tư cách là một người phụ nữ 'nói ra sự thật cho sức mạnh'

Hôm thứ Tư, cựu Bộ trưởng An ninh Nội địa Kirstjen Nielsen vì một lý do nào đó đã được đưa ra một diễn đàn để phát biểu tại Hội nghị thượng đỉnh Những người phụ nữ quyền lực nhất của Fortune. Và có thể đoán trước được, người phụ nữ giám sát các nỗ lực (đang diễn ra) của chính quyền Trump nhằm chia cắt các gia đình ở biên giới đã sử dụng thời gian của mình như một cơ hội để tự bảo vệ mình và tự nhận mình là người — và hãy hít thở sâu ở đây — “đã nói sự thật với quyền lực.

Toyota Racing Development sẽ cho ra mắt Supra 3000GT Concept, Massive Wing vào tháng tới

Toyota Racing Development sẽ cho ra mắt Supra 3000GT Concept, Massive Wing vào tháng tới

Vì thế hệ mới nhất của chiếc xe điều chỉnh được yêu thích trên thế giới hiện đã có mặt tại đây, nên chỉ có điều kiện là Toyota Racing Development sẽ đưa phiên bản Supra thế hệ thứ năm sửa đổi của riêng mình đến SEMA vào tháng tới. Toyota đã cho chúng tôi một gợi ý về những gì sẽ xảy ra trong tuần này: một chiếc Concept GR Supra 3000GT hiện đại.

Nicky Hilton Forced to Borrow Paris' 'I Love Paris' Sweatshirt After 'Airline Loses All [My] Luggage'

Nicky Hilton Forced to Borrow Paris' 'I Love Paris' Sweatshirt After 'Airline Loses All [My] Luggage'

Nicky Hilton Rothschild's luggage got lost, but luckily she has an incredible closet to shop: Sister Paris Hilton's!

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa. Từ Hollywood đến New York và mọi nơi ở giữa, hãy xem các ngôi sao yêu thích của bạn đang làm gì!

17 tuổi bị đâm chết trong khi 4 người khác bị thương trong một cuộc tấn công bằng dao trên sông Wisconsin

17 tuổi bị đâm chết trong khi 4 người khác bị thương trong một cuộc tấn công bằng dao trên sông Wisconsin

Các nhà điều tra đang xem xét liệu nhóm và nghi phạm có biết nhau trước vụ tấn công hay không

Thanh thiếu niên, Gia đình Florida Hội đồng quản trị trường học về Luật 'Không nói đồng tính': 'Buộc chúng tôi tự kiểm duyệt'

Thanh thiếu niên, Gia đình Florida Hội đồng quản trị trường học về Luật 'Không nói đồng tính': 'Buộc chúng tôi tự kiểm duyệt'

Vụ kiện, nêu tên một số học khu, lập luận rằng dự luật "Không nói đồng tính" được ban hành gần đây của Florida "có hiệu quả im lặng và xóa bỏ học sinh và gia đình LGBTQ +"

Đường băng hạ cánh

Đường băng hạ cánh

Cuối hè đầu thu là mùa hoài niệm. Những chiếc đèn đường chiếu ánh sáng của chúng qua những con đường đẫm mưa, và những chiếc lá dưới chân - màu đỏ cam tắt trong bóng chạng vạng - là lời nhắc nhở về những ngày đã qua.

Hãy tưởng tượng tạo ra một chiến lược nội dung thực sự CHUYỂN ĐỔI. Nó có thể.

Hãy tưởng tượng tạo ra một chiến lược nội dung thực sự CHUYỂN ĐỔI. Nó có thể.

Vào năm 2021, tôi khuyến khích bạn suy nghĩ lại mọi thứ bạn biết về khách hàng mà bạn phục vụ và những câu chuyện bạn kể cho họ. Lùi lại.

Sự mất mát của voi ma mút đã mở ra trái tim tôi để yêu

Sự mất mát của voi ma mút đã mở ra trái tim tôi để yêu

Vào ngày sinh nhật thứ 9 của Felix The Cat, tôi nhớ về một trong những mất mát lớn nhất trong cuộc đời trưởng thành của tôi - Sophie của tôi vào năm 2013. Tôi đã viết bài luận này và chia sẻ nó trên nền tảng này một thời gian ngắn vào năm 2013.

Khi bạn không thể trở thành người mà Internet muốn bạn trở thành

Khi bạn không thể trở thành người mà Internet muốn bạn trở thành

Tôi ghét từ "tàu đắm". Mọi người cảm thấy thoải mái trong la bàn đạo đức của riêng mình, và khi làm như vậy, họ thấy mình vượt qua sự phán xét.

Language