Que fait React-Dom ?

La fonction de "react-dom" est de restituer le DOM virtuel dans le document et de le transformer en un véritable DOM ; "react-dom" est une boîte à outils qui doit être utilisée lors du développement de projets React. méthodes pouvant être utilisées dans l'application Utilisé au niveau supérieur, il peut également être utilisé comme interface pour des opérations spéciales sur le DOM en dehors du modèle React.

L'environnement d'exploitation de ce tutoriel : système Windows 10, React version 17.0.1, ordinateur Dell G3.

Quel est le rôle de React-dom

Lorsque vous utilisez React pour développer une page Web, deux packages seront téléchargés, l'un est React et l'autre est React-dom. Le package React est le code de base de React et React. -dom est supprimé de React. La partie impliquant la manipulation du DOM.

L'idée centrale de React est le DOM virtuel. React comprend la fonction react.createElement qui génère le DOM virtuel et la classe Component. Lorsque nous encapsulons nous-mêmes des composants, nous devons hériter de la classe Component pour utiliser les fonctions de cycle de vie, etc. La fonction principale du package React-Dom est de transformer ces DOM virtuels en documents et de les transformer en DOM réels.

react-dom est une boîte à outils qui doit être utilisée lors du développement de projets React. Il s'agit d'une implémentation de plate-forme pour dom, principalement utilisée pour le rendu côté Web. Le package React-dom fournit des méthodes spécifiques au DOM qui peuvent être utilisées au niveau supérieur de l'application ou comme interface pour des opérations spéciales sur le DOM en dehors du modèle React.

react-dom contient principalement trois API : findDOMNode, unmountComponentAtNode et render. Ce qui suit est introduit par ordre de déclenchement.

1. render

render est utilisé pour restituer le DOM virtuel rendu par React dans le DOM du navigateur. Il est généralement utilisé dans les composants de niveau supérieur. Cette méthode monte l'élément dans le conteneur et renvoie l'instance de l'élément (c'est-à-dire la référence refs). S'il s'agit d'un composant sans état, render renverra null. Lorsque le composant est chargé, le rappel sera appelé. La syntaxe est :

render(ReactElement element,DOMElement container,[function callback])

Par exemple :

import React from 'react'
import ReactDOM from 'react-dom'
import Router from './router'
import { Provider } from 'react-redux'
import store from './store'
// Provider react-redux的内容
ReactDOM.render(
  <Provider store={store}>
    <Router/>
  </Provider>, document.getElementById(&#39;root&#39;))

2, findDOMNode

findDOMNode est utilisé pour obtenir le véritable élément DOM afin d'opérer sur le nœud DOM.

Avant cela, vous devez d'abord savoir : dans React, le DOM virtuel est en fait ajouté au HTML et converti en un vrai DOM après le montage du composant (render()), nous pouvons donc utiliser les deux méthodes ComponentDidMount et ComponentDidUpdate Get. Un exemple est le suivant :

import { findDOMNode } from 'react-dom';
<Example ref={ node=>{ this.node = node} }> // 利用ref获取Example组件的实例
const dom = findDOMNode(this.node); // 通过findDOMNode获取实例对应的真实DOM

Remarque : lorsqu'il s'agit d'opérations complexes, de nombreuses API DOM d'éléments sont disponibles. Cependant, les opérations DOM auront un grand impact sur les performances, les opérations DOM doivent donc être minimisées.

3. unmountComponentAtNode

unmountComponentAtNode est utilisé pour effectuer des opérations de démontage et est exécuté avant ComponentWillUnmount.

Apprentissage recommandé : "Tutoriel vidéo React"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!