Bereaksi vs ReactDOM?

197

Saya agak baru bereaksi. Saya melihat kita harus mengimpor dua hal untuk memulai, Reactdan ReactDOM, adakah yang bisa menjelaskan perbedaannya. Saya membaca dokumentasi Bereaksi , tetapi tidak disebutkan.

Noitidart
sumber

Jawaban:

250

React dan ReactDOM baru-baru ini dipecah menjadi dua perpustakaan yang berbeda. Sebelum v0.14, semua fungsi ReactDOM adalah bagian dari React. Ini mungkin menjadi sumber kebingungan, karena dokumentasi yang sedikit bertanggal tidak akan menyebutkan perbedaan React / ReactDOM.

Seperti namanya, ReactDOM adalah perekat antara React dan DOM. Seringkali, Anda hanya akan menggunakannya untuk satu hal: pemasangan bersama ReactDOM.render(). Fitur lain yang berguna dari ReactDOM adalah ReactDOM.findDOMNode()yang dapat Anda gunakan untuk mendapatkan akses langsung ke elemen DOM. (Sesuatu yang harus Anda gunakan dengan hemat dalam Bereaksi aplikasi, tetapi itu mungkin diperlukan.) Jika aplikasi Anda "isomorfis", Anda juga akan menggunakan ReactDOM.renderToString()kode back-end Anda.

Untuk yang lainnya, ada React. Anda menggunakan Bereaksi untuk mendefinisikan dan membuat elemen Anda, untuk kait siklus hidup, dll. Yaitu nyali aplikasi Bereaksi.

Alasan React dan ReactDOM dipecah menjadi dua perpustakaan adalah karena kedatangan React Native. Bereaksi berisi fungsionalitas yang digunakan dalam aplikasi web dan seluler. Fungsionalitas ReactDOM hanya digunakan di aplikasi web. [ PEMBARUAN: Setelah penelitian lebih lanjut, jelas ketidaktahuan saya tentang React Native ditampilkan. Memiliki paket Bereaksi yang umum untuk web dan seluler tampaknya lebih merupakan aspirasi daripada kenyataan saat ini. React Native saat ini merupakan paket yang sama sekali berbeda.]

Lihat posting blog yang mengumumkan rilis v0.14: https://facebook.github.io/react/blog/2015/10/07/react-v0.14.html

David L. Walsh
sumber
53

Dari pengumuman React v0.14 Beta .

Seperti kita melihat paket seperti react-native, react-art, react-canvas, dan react-three, itu menjadi jelas bahwa keindahan dan esensi dari Bereaksi tidak ada hubungannya dengan browser atau DOM.

Untuk membuatnya lebih jelas dan untuk membuatnya lebih mudah untuk membangun lebih banyak lingkungan yang Bereaksi dapat render, kami membagi paket reaksi utama menjadi dua: bereaksi dan bereaksi-dom.

Pada dasarnya, gagasan Bereaksi tidak ada hubungannya dengan browser, mereka hanya menjadi salah satu dari banyak target untuk merender pohon komponen menjadi. Paket ReactDOM telah memungkinkan pengembang untuk menghapus kode yang tidak penting dari paket Bereaksi dan memindahkannya ke repositori yang lebih tepat.

The reactpaket berisi React.createElement, React.createClassdan React.Component, React.PropTypes, React.Children, dan pembantu lain yang terkait dengan unsur-unsur dan kelas komponen. Kami menganggap ini sebagai pembantu isomorfik atau universal yang Anda perlukan untuk membangun komponen.

The react-dompaket berisi ReactDOM.render, ReactDOM.unmountComponentAtNodedan ReactDOM.findDOMNode, dan di react-dom/serverkami memiliki dukungan render server-side dengan ReactDOMServer.renderToStringdan ReactDOMServer.renderToStaticMarkup.

Dua paragraf ini menjelaskan dari mana metode API inti v0.13berakhir.

Dan Prince
sumber
6
Sampai Bereaksi v15.4.0 Bereaksi tidak lagi memiliki ReactDOM- facebook.github.io/react/blog/2016/11/16/react-v15.4.0.html
Rycochet
bereaksi tidak lagi termasuk React.PropTypes, proptypes memiliki repositori sendiri bernama 'prop-types'
ncubica
6

Sebelum v0.14 mereka adalah bagian dari file ReactJs utama, tetapi karena dalam beberapa kasus kita mungkin tidak membutuhkan keduanya, mereka memisahkan mereka dan itu dimulai dari versi 0.14, dengan begitu jika kita hanya perlu satu dari mereka, aplikasi kita akan menjadi lebih kecil karena hanya menggunakan salah satu dari itu:

var React = require('react'); /* importing react */
var ReactDOM = require('react-dom'); /* importing react-dom */

var MyComponent = React.createClass({
  render: function() {
    return <div>Hello World</div>;
  }
});

ReactDOM.render(<MyComponent />, node);

Paket Bereaksi berisi: React.createElement, React.createClass, React.Component, React.PropTypes, React.Children

Paket React-dom berisi: ReactDOM.render, ReactDOM.unmountComponentAtNode, ReactDOM.findDOMNode, dan reaksi-dom / server yang termasuk: ReactDOMServer.renderToString dan ReactDOMServer.renderToStaticMarkup.

Alireza
sumber
komentar ini tidak terkait dengan pertanyaan asli, tetapi jawaban Anda memperkenalkan memerlukan ('bla') .. ingin menjelaskan bagaimana menjalankan ini di Browser, karena kebutuhan bukan js biasa?
joedotnot
5

Modul ReactDOM memaparkan metode khusus DOM, sementara React memiliki alat inti yang dimaksudkan untuk dibagikan oleh Bereaksi pada platform yang berbeda (mis. React Native).

http://facebook.github.io/react/docs/tutorial.html

Daniel
sumber
4

Sepertinya mereka telah memisahkan Bereaksi menjadi reactdan react-dompaket, sehingga Anda tidak harus menggunakan bagian yang terkait DOM untuk proyek di mana Anda ingin menggunakannya dalam kasus-kasus non-DOM, seperti di sini https: // github.com/Flipboard/react-canvas tempat mereka mengimpor

var React = require('react');
var ReactCanvas = require('react-canvas');

seperti yang Anda lihat. Tanpa react-dom.

Íhor Mé
sumber
3

Agar lebih ringkas, reaksi adalah untuk komponen dan reaksi-dom adalah untuk rendering komponen dalam DOM. 'react-dom' bertindak sebagai perekat antara komponen dan DOM. Anda akan menggunakan metode render () dari reaksi-dom untuk me-render komponen di DOM dan hanya itu yang harus Anda ketahui ketika Anda mulai menggunakannya.

Arvind
sumber
0

The react packagememegang react sourcekomponen, negara, alat peraga dan semua kode yaitu bereaksi.

The react-dompaket seperti namanya adalahglue between React and the DOM . Seringkali, Anda hanya akan menggunakannya untuk satu hal: mounting your application to the index.html file with ReactDOM.render().

Mengapa memisahkan mereka?

The reasonReact dan ReactDOM dipecah menjadi dua perpustakaan karena kedatangan React Native (A react platform for mobile development).

Ashwani Panwar
sumber