render

Цей API буде видалено у наступному старшому релізі React.

У React 18 render було замінено на createRoot. Використання render у React 18 попередить, що ваш застосунок буде поводитися так, ніби він працює під управлінням React 17. Дізнайтеся більше тут.

render рендерить фрагмент JSX ("вузол React") у вузол DOM браузера.

render(reactNode, domNode, callback?)

Довідник

`render(reactNode, domNode, callback?)`

Викликає render для відображення React-компонента всередині DOM-елемента браузера.

import { render } from 'react-dom';

const domNode = document.getElementById('root');
render(<App />, domNode);

React відобразить <App /> у domNode і візьме на себе керування DOM всередині нього.

Додаток, повністю зібраний з React, зазвичай має лише один виклик render з кореневого компонента. Сторінка, яка використовує "посипання" React для частин сторінки, може мати стільки викликів render, скільки потрібно.

Дивіться більше прикладів нижче.

Параметри

reactNode: Вузол React-вузла, який ви хочете відобразити. Зазвичай це буде фрагмент JSX на кшталт <App />, але ви також можете передати React-елемент, створений за допомогою createElement(), рядок, число, null або undefined.
domNode: A DOM-елемент. React відобразить reactNode, який ви передали всередині цього DOM-елемента. З цього моменту React буде керувати DOM всередині domNode і оновлювати його, коли ваше дерево React змінюється.
опція зворотній виклик: Функція. Якщо передано, React викличе її після того, як ваш компонент буде поміщено в DOM.

Повернення

render зазвичай повертає null. Однак, якщо reactNode, який ви передаєте, є компонентом класу , то він поверне екземпляр цього компонента.

Застереження

У React 18 render було замінено на createRoot. Будь ласка, використовуйте createRoot для React 18 та пізніших версій.
При першому виклику render React очистить весь існуючий HTML-вміст всередині domNode перед рендерингом React-компонента. Якщо ваш domNode містить HTML, згенерований React на сервері або під час збірки, використовуйте замість нього hydrate(), який прикріплює обробники подій до існуючого HTML.
Якщо ви викликаєте render на одному і тому ж domNode більше одного разу, React оновить DOM за необхідності, щоб відобразити останній переданий JSX. React вирішить, які частини DOM можна використовувати повторно, а які потрібно відтворити заново, "зіставивши їх" з раніше відрендереним деревом. Повторний виклик render на тому ж самому domNode схожий на виклик функції set у кореневому компоненті: React уникає непотрібних оновлень DOM.
Якщо ваш застосунок повністю зібрано за допомогою React, ви, ймовірно, матимете лише один виклик render у вашому застосунку. (Якщо ви використовуєте фреймворк, він може виконати цей виклик за вас.) Якщо ви хочете відрендерити фрагмент JSX в іншій частині DOM-дерева, яка не є нащадком вашого компонента (наприклад, модальне вікно або підказку), використовуйте createPortal замість render.

Використання

Викликати render для відображення React-компонента</CodeStep> всередині <CodeStep data-step="2">DOM-вузла браузера</CodeStep> .</p> <pre><code data-meta="[[1, 4, "<App />"], [2, 4, "document.getElementById('root')"]]" class="language-js">import { render } from 'react-dom&039;; імпортувати App з './App.js'; render(<App />, document.getElementById('root'));

Відображення кореневого компонента

У програмах, повністю побудованих на React, зазвичай це робиться лише один раз при запускудля рендерингу "кореневого" компонента.

import './styles.css';
import { render } from 'react-dom';
import App from './App.js';

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

export default function App() {
  return <h1>Hello, world!</h1>;
}

Зазвичай вам не потрібно викликати render знову або викликати його в інших місцях. З цього моменту React буде керувати DOM вашого застосунку. Для оновлення інтерфейсу користувача ваші компоненти будуть використовувати state.

Відображення декількох коренів

Якщо ваша сторінка не повністю зібрана за допомогою React, викличте render для кожного фрагменту UI верхнього рівня, керованого React.

<nav id="navigation"></nav>
<main>
  <p>This paragraph is not rendered by React (open index.html to verify).</p>
  <section id="comments"></section>
</main>

import './styles.css';
import { render } from 'react-dom';
import { Comments, Navigation } from './Components.js';

render(
  <Navigation />,
  document.getElementById('navigation')
);

render(
  <Comments />,
  document.getElementById('comments')
);

export function Navigation() {
  return (
    <ul>
      <NavLink href="/">Home</NavLink>
      <NavLink href="/about">About</NavLink>
    </ul>
  );
}

function NavLink({ href, children }) {
  return (
    <li>
      <a href={href}>{children}</a>
    </li>
  );
}

export function Comments() {
  return (
    <>
      <h2>Comments</h2>
      <Comment text="Hello!" author="Sophie" />
      <Comment text="How are you?" author="Sunil" />
    </>
  );
}

function Comment({ text, author }) {
  return (
    <p>{text} — <i>{author}</i></p>
  );
}

nav ul { padding: 0; margin: 0; }
nav ul li { display: inline-block; margin-right: 20px; }

Ви можете знищити згенеровані дерева за допомогою unmountComponentAtNode().

Оновлення зображеного дерева

Ви можете викликати render більше одного разу на одному вузлі DOM. Доки структура дерева компонентів збігається з тим, що було відрендерено раніше, React буде зберігати стан. Зверніть увагу, що ви можете вводити вхідні дані, а це означає, що оновлення від повторних викликів render щосекунди не є деструктивними:

import { render } from 'react-dom';
import './styles.css';
import App from './App.js';

let i = 0;
setInterval(() => {
  render(
    <App counter={i} />,
    document.getElementById('root')
  );
  i++;
}, 1000);

export default function App({counter}) {
  return (
    <>
      <h1>Hello, world! {counter}</h1>
      <input placeholder="Type something here" />
    </>
  );
}

Рідко доводиться викликати render декілька разів. Зазвичай замість цього ви оновлюєте стан всередині ваших компонентів.

[email protected]