如何卸载 ReactJS 节点

2020-04-29 08:00:00 · 飞浪

介绍 React页面的各种元素使用方法render()呈现到DOM中，该方法来自react-dom包，允许我们从DOM中找到特定元素并呈现相应的组件。同样的，DOM元素也可以从容器中识

介绍

React 页面的各种元素使用方法render()呈现到 DOM 中，该方法来自react-dom包，允许我们从 DOM 中找到特定元素并呈现相应的组件。

同样的，DOM 元素也可以从容器中识别和卸载。在本指南中，我们将学习如何使用 React 顶级 API 查找特定节点并将其卸载。

在 React DOM 中查找节点

有时，你可能需要从实际的浏览器 DOM 中查找特定的 DOM 节点。React 提供了一个名为findDOMNode()的 API 来执行此操作。

findDOMNode()函数用于查找组件渲染的具体 DOM 元素。它将返回组件渲染的 DOM 节点，如果没有，则返回结果“null”。

函数findDOMNode接受一个参数，该参数应该是组件的名称。

以下是函数findDOMNode()的语法。

      ReactDOM.findDOMNode(component)

为了更好地理解，让我们创建一个包含一个文本输入和按钮的组件。当用户点击按钮时，输入应该被聚焦。

      import React, { Component } from "react";
import { findDOMNode, render } from 'react-dom';

class FindNode extends Component {
  constructor() {
    super();
    this.handleClick = this.handleClick.bind(this)
  }

  handleClick() {
    findDOMNode(this.refs.myinput).focus();
  }

  render() {
    return (
      <div>
        <input type="text" ref="myinput" />
        <input
          type="button"
          value="Click to focus input"
          onClick={this.handleClick}
        />
      </div>
    );
  }
}

export default FindNode;
    

在上面的例子中，观察到有一个输入的 ref 为myinput，以及一个附加了事件处理程序的按钮，称为this.handleClick。

为了使输入元素在单击按钮后获得焦点，请使用下面的代码行。

      handleClick() {
    findDOMNode(this.refs.myinput).focus();
}
    

函数findDOMNode将从 DOM 中找到匹配的元素或组件，以便获得焦点输入。

这就是如何使用顶级 API findDOMNode通过 React 从现有 DOM 结构中查找 DOM 的方法。

卸载 React 节点

操作完成后，特定组件可能会从 DOM 中移除。在这种情况下，有必要从 DOM 中移除节点；否则，这可能会导致性能下降。

React 有一个顶级 API，称为unmountComponentAtNode()，它可以从特定容器中删除组件。

函数unmountComponentAtNode()接受一个参数作为应从中删除特定组件的容器。

下面是函数unmountComponentAtNode()的基本语法。

      ReactDOM.unmountComponentAtNode(component);

参数组件可以是任何不是由 React 本身渲染的组件。

索引.html

在index.html文件中定义id 为root的<div>。

      <div id="root"></div>

可以使用函数unmountComponentAtNode()卸载上述元素。

      import React, { Component } from "react";
import { unmountComponentAtNode, render } from "react-dom";

class UnmountNode extends Component {
  constructor() {
    super();
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    unmountComponentAtNode(document.getElementById('root'));
  }

  render() {
    return (
      <div>
        <button onClick={this.handleClick}>Click to unmount</button>
      </div>
    );
  }
}

export default UnmountNode;
    

要卸载的元素是一个<div>，其根元素为 id 属性。一旦用户点击按钮，应用的代码应如下所示。

      handleClick() {
    unmountComponentAtNode(document.getElementById('root'));
}
    

当handleClick()函数触发时，它会在现有 DOM 元素中搜索附加到任何元素的根ID。如果找到，则从 DOM 中删除该元素。

首选方法是从 DOM 中卸载任何节点，但另一种方法是使用原始 JavaScript 从 DOM 中隐藏特定元素，如下所示。

      handleClick() {
    var x = document.getElementById("root");
    if (x.style.display === "none") {
      x.style.display = "block";
    } else {
      x.style.display = "none";
    }
}
    

该示例使用原始 JavaScript，从 DOM 获取元素，并根据切换操作将其样式属性更改为块或节点。

最好使用 React 的官方 API unmountComponentAtNode()来卸载组件。与使用原生 JavaScript 相比，这将为您提供更有效的结果。

结论

在本指南中，我们学习了如何使用 React 高级 API 查找特定节点并从容器中卸载该节点。

react-dom包中有各种各样的 API可供选择，用于处理 DOM 元素以保持有效性和应用程序性能。我希望本指南能帮助您深入了解 React DOM。

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

React框架

阅读全文

如何卸载 ReactJS 节点

杭州电子商务研究院

4年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

import React, { Component } from "react"; import { findDOMNode, render } from 'react-dom'; class FindNode extends Component { constructor() { super(); this.handleClick = this.handleClick.bind(this) } handleClick() { findDOMNode(this.refs.myinput).focus(); } render() { return ( <div> <input type="text" ref="myinput" /> <input type="button" value="Click to focus input" onClick={this.handleClick} /> </div> ); } } export default FindNode;

import React, { Component } from "react"; import { unmountComponentAtNode, render } from "react-dom"; class UnmountNode extends Component { constructor() { super(); this.handleClick = this.handleClick.bind(this); } handleClick() { unmountComponentAtNode(document.getElementById('root')); } render() { return ( <div> <button onClick={this.handleClick}>Click to unmount</button> </div> ); } } export default UnmountNode;