React 是一个非常流行的前端框架，它的核心库是 react 包。但是，实际上 react 还有一个非常重要的包，那就是 react-dom。react-dom 提供了与 DOM 相关的功能，它是 React 应用程序的必要部分。本文将介绍 react-dom-core，是 react-dom 的核心部分，它包含了 React DOM 的核心功能。
什么是 react-dom-core
react-dom-core 是 react-dom 包的核心部分，它提供了 React DOM 应用程序必要的基本功能。它包括以下内容：
render()：渲染 React 元素到页面上。hydrate()：将 React 元素注入到已存在的 HTML 内容中。unmountComponentAtNode()：从 DOM 中卸载指定的 React 组件。findDOMNode()：获取 DOM 中的 React 组件实例。createPortal()：将 React 组件渲染到外部 DOM 节点。
React 提供了一种抽象的界面编程方式，将界面拆分成了组件和元素，并用 JSX 模板语言编写组件。但是，这些组件最终还是需要被渲染到 HTML 页面上，而 react-dom-core 就是提供这个渲染功能的核心部分。
安装 react-dom-core
可以通过 npm 包管理器进行安装：
npm install react-dom-core
使用 react-dom-core
使用 react-dom-core 的方式与 react-dom 相同，使用以下命令导入：
import ReactDOM from 'react-dom-core';
渲染 React 元素
import React from 'react';
import ReactDOM from 'react-dom-core';
const element = <h1>Hello, world!</h1>;
ReactDOM.render(element, document.getElementById('root'));此处会在 id 为 root 的 HTML 元素中渲染出 "Hello, world!"。
将 React 元素注入到已存在的 HTML 内容中
<div id="root">Loading...</div>
import React from 'react';
import ReactDOM from 'react-dom-core';
const element = <h1>Hello, world!</h1>;
ReactDOM.hydrate(element, document.getElementById('root'));此处使用 hydrate() 方法将 React 元素注入到已存在的 HTML 内容中。
卸载指定的 React 组件
<div id="root"></div>
-- -------------------- ---- ------- ------ ----- ---- -------- ------ -------- ---- ----------------- ------ ----------- ---- ---------------- ---------------------------- --- --------------------------------- ------------- -- - ----------------------------------------------------------------- -- ------
此处渲染了一个 MyComponent 组件，并在 5 秒后卸载它。
获取 DOM 中的 React 组件实例
<div id="root"></div>
import React from 'react';
import ReactDOM from 'react-dom-core';
import MyComponent from './MyComponent';
ReactDOM.render(<MyComponent />, document.getElementById('root'));
const domNode = ReactDOM.findDOMNode(MyComponent);
console.log(domNode);此处获取 MyComponent 的 DOM 节点，并将其打印出来。
将 React 组件渲染到外部 DOM 节点
<div id="root">Hello, world!</div> <div id="portal"></div>
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- -----------------
----- ----- - ----- -- -
------ ----------------------
---- ------------------
---- ---------------------------------------------
-------
---------------------------------
--
--
----- --- - -- -- -
------ -
-----
---------- -----------
-------
------- -- --- ----- -----------
--------
------
--
--
-------------------- --- ---------------------------------此处渲染了一个 Modal 组件，将它渲染到页面上根节点下的 portal 节点上。
总结
本文介绍了 react-dom-core 的基本使用方法，它提供了 React DOM 应用程序必要的基本功能。通过学习本文，你应该能够更好地理解 React DOM 的渲染机制，并且能够熟练地使用 react-dom-core 包编写 React 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65248