Maison  >  Article  >  interface Web  >  qu'est-ce que réagir-dom

qu'est-ce que réagir-dom

青灯夜游
青灯夜游original
2020-11-11 11:59:055588parcourir

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.

qu'est-ce que réagir-dom

Si nous utilisons React pour développer des pages Web, nous téléchargerons inévitablement deux packages, l'un est React et l'autre est React-dom, où React est le noyau code de réaction.

Le package react-dom fournit des méthodes spécifiques au DOM (spécifiques au DOM) qui peuvent être utilisées au niveau supérieur de votre application. votre application. Si vous en avez besoin, vous pouvez utiliser ces méthodes en dehors du modèle React comme interfaces pour des opérations spéciales sur le DOM en dehors du modèle React. Cependant, en général, la plupart des composants n'ont pas besoin d'utiliser ce module.

Si vous utilisez npm et ES6, vous pouvez l'importer avec import ReactDOM from 'react-dom'. Si vous utilisez npm et ES5, vous pouvez l'importer avec var ReactDOM = require('react-dom').

Cinq interfaces de React-dom

1 render()

ReactDOM.render(element, container[, callback])

Rendu une dans l'élément React du conteneur fourni. et renvoie une référence au composant (ou null pour les composants sans état).

Si l'élément React a déjà été rendu dans le conteneur, cela effectuera une opération de mise à jour sur celui-ci et ne modifiera le DOM que si nécessaire pour refléter le dernier élément React.

Si une fonction de rappel facultative est fournie, le rappel sera exécuté après le rendu ou la mise à jour du composant.

2. hydrate()

ReactDOM.render(element, container[, callback])
// 渲染一个 React 元素到由 container 提供的 DOM 中,并且返回组件的一个 引用(reference) (或者对于 无状态组件 返回 null )

3. unmountComponentAtNode()

ReactDOM.unmountComponentAtNode(container)
// 从 DOM 中移除已装载的 React 组件,并清除其事件处理程序和 state 。 如果在容器中没有挂载组件,调用此函数什么也不做。 如果组件被卸载,则返回 true ,如果没有要卸载的组件,则返回 false

4. Il n'est pas recommandé d'utiliser

ReactDOM.findDOMNode(component)
// 如果组件已经被装载到 DOM 中,这将返回相应的原生浏览器 DOM 元素。在大多数情况下,你可以绑定一个 ref 到 DOM 节点上,从而避免使用findDOMNode。

5. createPortal() C'est très utile, ahhh !

ReactDOM.createPortal(child, container)
// 创建一个 插槽(portal) 。 插槽提供了一种方法,可以将子元素渲染到 DOM 组件层次结构之外的 DOM 节点中

Pour plus de connaissances liées à la programmation, veuillez visiter : Introduction à la programmation ! !

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent:Que sont jQuery et Zepto ?Article suivant:Que sont jQuery et Zepto ?