React render()-Methode

React 组件生命周期React-Komponenten-Lebenszyklus

In React 18,ReactDOM.renderdie Methode wurdeReactDOM.createRootundroot.renderersetzt. Die neue API bietet leistungsfähigere Funktionen und eine bessere Leistung. Das Folgende ist eine Einführung in diese Methoden und ihre Verwendung.

1、ReactDOM.createRoot

ReactDOM.createRoot ist eine neue Methode, die in React 18 eingeführt wurde und verwendet wird, um ein Root-Objekt zu erstellen, das die Root-Komponente steuern kann. Diese Methode gibt ein Root-Objekt zurück, das Sie verwenden können, um Ihren React-Komponentenbaum zu rendern.

2、root.render

Verwenden Sie die render-Methode des von der ReactDOM.createRoot-Methode zurückgegebenen Root-Objekts, um den Komponentenbaum zu rendern. Dieser Ansatz ersetzt die alte ReactDOM.render-Methode.

Beispiel

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App'; // Deine Hauptkomponente

// Das Root-Element abrufen
const rootElement = document.getElementById('root');

// Root erstellen
const root = ReactDOM.createRoot(rootElement);

// Komponente rendern
root.render(<App />);

Angenommen, du hast eine einfache App-Komponente, kannst du createRoot verwenden, um sie so zu rendern:

Beispiel

// App.js
import React from 'react';

function App() {
  return (
    <div>
      <h1>Hello, React 18!</h1>
    </div>
  );
}

export default App;

Beispiel

// index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

// Das Root-Element abrufen
const rootElement = document.getElementById('root');

// Root erstellen
const root = ReactDOM.createRoot(rootElement);

// Komponente rendern
root.render(<App />);

Online-Beispiel

Das folgende Beispiel verwendet dierender()-Methode inid="root", um React-Elemente im Container vonHeader zu rendern：

Beispiel

class Header extends React.Component { render() { return ( <h1>Example Tutorial - Was du lernst, ist nicht nur Technologie, sondern auch Träume!h1> ); } } const root = ReactDOM.createRoot(document.getElementById("root")); root.render(<Header />, document.getElementById('root'));

Ausprobieren »

In React 17 und früheren Versionen würden Sie die ReactDOM.render-Methode verwenden, um Komponenten zu rendern:

Beispiel

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

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

In React 18 kann die Verwendung von createRoot Concurrent Rendering und andere neue Funktionen besser unterstützen.

React 18 führt Concurrent-Funktionen ein, wodurch React-Anwendungen bei der Verarbeitung umfangreicher Updates effizienter werden.

React 组件生命周期React-Komponenten-Lebenszyklus

Andere Erweiterungen