Рассмотрим функцию ReactDOM.render более подробно, она принимает 3 параметра
ReactElement: элемент для рендерингаDOMElement: элемент DOM, в который надо добавить ReactElementCallback: опциональная функция обратного вызова
Элемент определяется так
|
1 |
const anotherDomElement = <h2>anotherDomElement</h2>; |
Далее, в коде он может использоваться.
Ниже примеры использования.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Hello React</title> </head> <body> <div id="app"></div> <div id="app2"></div> <div id="app3"></div> <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js"></script> <script type="text/babel"> const phones = <div id="items"> <h2>Список телефонов</h2> <ul> <li>iPhone 7</li> <li>Samsung Galaxy A5</li> <li>HTC U Ultra</li> <li>Pixel XL</li> </ul> </div>; ReactDOM.render( phones, document.getElementById("app"), function(){ console.log("this is callback function");} ) // const anotherDomElement = <h2>anotherDomElement</h2>; ReactDOM.render( anotherDomElement, document.getElementById("app2"), function(){ console.log("this is callback function");} ) ReactDOM.render( <h2>Write html directly to ReactDOM.render</h2>, document.getElementById("app3"), function(){ console.log("this is callback function");} ) </script> </body> </html> |
Ниже, пример обновления элементов
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Hello React</title> </head> <body> <div id="header"></div> <div id="container"></div> <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js"></script> <script type="text/babel"> function tick() { ReactDOM.render( <div> <h2>Текущее время {new Date().toLocaleTimeString()}.</h2> </div>, document.getElementById("header") ); } setInterval(tick, 1000); ReactDOM.render( <div> <h2>Список телефонов</h2> <ul> <li>iPhone 7</li> <li>Samsung Galaxy A5</li> <li>HTC U Ultra</li> <li>Pixel XL</li> </ul> </div>, document.getElementById("container"), function(){ console.log("рендеринг элемента React");} ) </script> </body> </html> |
При обновлении элемента виртуальный React DOM сравнивает текущее состояние элемента с его предыдущим состоянием и при наличии изменений применяет их к веб-странице и обновляет стандартный DOM. Но обновляться будет не весь пересоздаваемый элемент, а только текстовый узел, который содержит вывод текущего времени, так как только этот узел будет отличаться от предыдущего состояния.