npm 包 react-redom 使用教程-JavaScript中文网-JavaScript教程资源分享门户

前言

在前端领域，我们经常会使用到各种各样的库和框架来实现我们的需求。其中，React 是一款非常流行的前端框架，它的虚拟 DOM 和组件化的特性得到了广泛的认可。而 DOM 操作是前端开发中十分常见的需求，虽然 React 提供了一些简单的 DOM 操作 API ，但对于一些复杂的场景来说并不够便捷。这时，一个名为 react-redom 的 npm 包便应运而生。

react-redom 是一个基于 React 的 DOM 操作库，它提供了比 React 更加简单、灵活的 DOM 操作 API，可以帮助我们更加轻松地进行各种复杂的 DOM 操作。接下来，我们将学习如何使用 react-redom。

安装

我们可以通过 NPM 来进行安装 react-redom 。

npm install react-redom

使用方法

首先，在组件中引入 react-redom 即可：

-- -------------------- ---- -------
------ ----- ---- --------
------ - --- ------ ------- - ---- --------------

----- ----------- ------- --------------- -
  ------------------- -
    -- ----------
    -------------------- --------- ------ ---------
  -

  ---------------------- -
    -- ----------
    -----------------------
  -

  -------- -
    ------ -----
  -
-

------ ------- ------------

上述代码中，我们通过 el 函数创建了一个 div 元素，并将其插入到 document.body 中，然后在组件卸载时将其删除。el 函数接收任意数量的参数，可以是字符串、DOM 元素或者 React 组件。

API 文档

el(tagName, content)

创建一个 DOM 元素。

el('div', 'Hello world');

el('p', [
  el('span', 'Hello'),
  ' world!',
]);

text(content)

创建一个文本节点。

text('hello world');

mount(parent, child, [before])

将 child 插入到 parent 中，并放置到 before 元素之前。

mount(document.body, el('div', 'Hello world'));

mount(document.body, [
  el('div', 'Hello'),
  el('div', 'World'),
]);

mount(document.body, el('div', 'Hello world'), el('p'));

unmount(child)

从 parent 中删除 child 元素。

unmount(document.body);

html(el, ...args)

将 el 中的 innerHTML 设置为 args。

html(document.body, '<div>Hello world</div>');

svg(tagName)

创建一个 SVG 元素。

svg('rect');

setAttr(el, key, value)

设置 el 的属性。

setAttr(document.body, 'class', 'container');

setStyle(el, prop, value)

为 el 添加一条 CSS 样式规则。

setStyle(document.body, 'background-color', 'red');

setChildren(parent, children)

将 parent 中的所有子元素设置为 children。

setChildren(
  document.body,
  el('div', 'Hello'),
  el('div', 'World'),
);

示例

下面是一个例子，用 react-redom 创建一个简单的列表：

-- -------------------- ---- -------
------ ----- ---- --------
------ - --- ----- - ---- --------------

----- ---- ------- --------------- -
  ------------------- -
    ----- ----- - --------- --------- ----------
    ------
      --------------
      -------- -------------- -- -------- --------
    --
  -

  ---------------------- -
    -----------------------
  -

  -------- -
    ------ -----
  -
-

------ ------- -----

启动应用后，页面中将出现一个类似于下面这样的列表：

Apple
Orange
Banana

小结

react-redom 提供了比 React 更加舒适的 DOM 操作 API，可以使我们更加轻松地完成各种复杂的 DOM 操作。通过本文，我们已经学会了如何使用 react-redom，它会给我们的日常开发带来不小的帮助。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60056be881e8991b448e5a0a