ทำปฏิกิริยากับ ReactDOM?

ฉันค่อนข้างใหม่ที่จะตอบสนอง ฉันเห็นว่าเราต้องนำเข้าสองสิ่งเพื่อเริ่มต้นReactและReactDOMทุกคนสามารถอธิบายความแตกต่างได้ ฉันอ่านเอกสาร Reactแต่มันไม่ได้พูดอะไร

React และ ReactDOM เพิ่งถูกแยกเป็นสองไลบรารีที่แตกต่างกัน ก่อนหน้า v0.14 ฟังก์ชัน ReactDOM ทั้งหมดเป็นส่วนหนึ่งของ React นี่อาจเป็นสาเหตุของความสับสนเนื่องจากเอกสารที่มีวันที่เล็กน้อยจะไม่กล่าวถึงความแตกต่างของ React / ReactDOM

ตามที่มีความหมายชื่อ ReactDOM เป็นกาวระหว่าง React และ DOM บ่อยครั้งที่คุณจะใช้มันสำหรับสิ่งเดียวที่หนึ่ง: ReactDOM.render()การติดตั้งด้วย อีกคุณสมบัติที่มีประโยชน์ของ ReactDOM คือReactDOM.findDOMNode()คุณสามารถใช้เพื่อเข้าถึงโดยตรงไปยังองค์ประกอบ DOM (บางสิ่งที่คุณควรใช้อย่าง จำกัด ในแอป React แต่อาจจำเป็น) หากแอปของคุณคือ "isomorphic" คุณจะต้องใช้ReactDOM.renderToString()ในโค้ดแบ็คเอนด์ด้วย

สำหรับทุกอย่างอื่นมีปฏิกิริยา คุณใช้ React เพื่อกำหนดและสร้างองค์ประกอบสำหรับ lifecycle hooks เป็นต้นเช่นความกล้าของแอปพลิเคชัน React

เหตุผลที่ React และ ReactDOM ถูกแบ่งออกเป็นสองไลบรารีเนื่องจากการมาของ React Native React มีฟังก์ชั่นการใช้งานในเว็บและแอพมือถือ ฟังก์ชั่น ReactDOM ใช้ในเว็บแอพเท่านั้น [ อัพเดต:จากการวิจัยเพิ่มเติมมันชัดเจนว่าไม่รู้ว่า React Native กำลังแสดงอยู่ การมีแพคเกจ React ทั่วทั้งเว็บและมือถือดูเหมือนจะมีความทะเยอทะยานมากกว่าความเป็นจริงในขณะนี้ React Native อยู่ในขณะนี้แพ็คเกจที่แตกต่างอย่างสิ้นเชิง]

ดูโพสต์บล็อกที่ประกาศการเปิดตัว v0.14: https://facebook.github.io/react/blog/2015/10/07/react-v0.14.html

จากปฏิกิริยา v0.14 รุ่นเบต้าประกาศ

ในขณะที่เรามองไปที่แพคเกจเช่นreact-native, react-art, react-canvasและreact-threeก็เป็นที่ชัดเจนว่าความงามและสาระสำคัญของการตอบสนองมีอะไรจะทำอย่างไรกับเบราว์เซอร์หรือ DOM

เพื่อให้ชัดเจนยิ่งขึ้นและเพื่อให้ง่ายต่อการสร้างสภาพแวดล้อมที่ React สามารถแสดงผลได้เราจึงแบ่งแพ็คเกจปฏิกิริยาหลักออกเป็นสองส่วนคือ react และ react-dom

โดยพื้นฐานแล้วความคิดของ React ไม่มีส่วนเกี่ยวข้องกับเบราว์เซอร์ แต่เป็นเพียงหนึ่งในหลาย ๆ เป้าหมายในการแสดงโครงสร้างของส่วนประกอบ แพ็คเกจ ReactDOM อนุญาตให้นักพัฒนาลบโค้ดที่ไม่จำเป็นออกจากแพ็คเกจ ReactDOM และย้ายไปไว้ในที่เก็บที่เหมาะสมกว่า

reactแพคเกจประกอบด้วยReact.createElement, React.createClassและReact.Component, React.PropTypes, React.Childrenและผู้ช่วยเหลืออื่น ๆ ที่เกี่ยวข้องกับองค์ประกอบและการเรียนส่วนประกอบ เราคิดว่าสิ่งเหล่านี้เป็นผู้ช่วยisomorphic หรือสากลที่คุณต้องการสร้างส่วนประกอบ

react-domแพคเกจประกอบด้วยReactDOM.render, ReactDOM.unmountComponentAtNodeและReactDOM.findDOMNodeและreact-dom/serverเรามีการสนับสนุนการแสดงผลด้านเซิร์ฟเวอร์ด้วยและReactDOMServer.renderToStringReactDOMServer.renderToStaticMarkup

ทั้งสองย่อหน้าอธิบายที่วิธีการ API หลักจากv0.13จบลง

ก่อนv0.14พวกเขาเป็นส่วนหนึ่งของไฟล์ ReactJs หลัก แต่ในบางกรณีเราอาจไม่จำเป็นต้องใช้ทั้งคู่แยกจากกันและเริ่มจากเวอร์ชัน 0.14 ด้วยวิธีนี้หากเราต้องการเพียงหนึ่งไฟล์แอปของเราจะเล็กลงเนื่องจาก ใช้เพียงหนึ่งในนั้น:

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);

ตอบสนองต่อแพคเกจประกอบด้วย: React.createElement, React.createClass, React.Component, React.PropTypes, React.Children

แพ็คเกจ React-domประกอบด้วย: ReactDOM.render, ReactDOM.unmountComponentAtNode, ReactDOM.findDOMNode และ react-dom / เซิร์ฟเวอร์ที่รวมถึง: ReactDOMServer.renderToStaticMarkup

โมดูล ReactDOM เปิดเผยวิธีการเฉพาะ DOM ในขณะที่ React มีเครื่องมือหลักที่ตั้งใจจะแบ่งปันโดย React บนแพลตฟอร์มต่างๆ (เช่น React Native)

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

ดูเหมือนว่าพวกเขาได้แยก React เข้าreactและreact-domแพ็คเกจดังนั้นคุณไม่จำเป็นต้องใช้ส่วนที่เกี่ยวข้องกับ DOM สำหรับโครงการที่คุณต้องการใช้ในกรณีที่ไม่ใช่ DOM เฉพาะเช่นในที่นี่https: // github.com/Flipboard/react-canvas ที่นำเข้า

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

อย่างที่เห็น. react-domไม่มี

เพื่อให้รัดกุมยิ่งขึ้นการตอบสนองมีไว้สำหรับส่วนประกอบและ react-dom ใช้สำหรับการสร้างการแสดงผลส่วนประกอบใน DOM 'react-dom' ทำหน้าที่เป็นกาวระหว่างส่วนประกอบและ DOM คุณจะใช้วิธีการแสดงผล () ของ react-dom เพื่อสร้างองค์ประกอบใน DOM และนั่นคือทั้งหมดที่คุณต้องรู้เมื่อคุณเริ่มด้วย

การreact packageถือครองreact sourceส่วนประกอบ, สถานะ, อุปกรณ์ประกอบฉากและรหัสทั้งหมดที่ตอบสนอง

แพคเกจเป็นชื่อที่มีความหมายคือreact-dom glue between React and the DOMบ่อยครั้งคุณจะใช้เพื่อสิ่งเดียวเท่านั้น:mounting your application to the index.html file with ReactDOM.render()เท่านั้น .

ทำไมต้องแยกพวกเขา

reasonตอบสนองและ ReactDOM React Native (A react platform for mobile development)ถูกแบ่งออกเป็นสองห้องสมุดเนื่องจากการมาถึงของ