我应该在哪里为 Reactjs 中的 DOM 元素创建引用？答案

【问题标题】：Where should I create references for DOM elements in Reactjs?我应该在哪里为 Reactjs 中的 DOM 元素创建引用？
【发布时间】：2021-02-04 18:10:43
【问题描述】：

class SearchInput extends React.Component {
  constructor(props) {
    super(props);
    this.searchInputRef = React.createRef(); // ????️ LOOK HERE 
  }
  onFormSubmit = (e) => {
    e.preventDefault();
    // const query = e.target.querySelector("#searchInput").value;  // ????️ LOOK HERE
    const query = this.searchInputRef.current.value;
    console.log(query);
  };
  render() {
    return (
      <form onSubmit={this.onFormSubmit}>
        <div className="input-group-text">
          {this.props.label}
          &nbsp;
          <input
            type="text"
            className="form-control"
            id="searchInput"
            aria-describedby="emailHelp"
            placeholder="Search"
            ref={this.searchInputRef}
          />
          &nbsp;
          <button type="submit" className="btn btn-primary">
            <i className="fas fa-search"></i>
          </button>
        </div>
      </form>
    );
  }
}

我对 ReactJS 很陌生，但我很难用它，我对上面的组件有两个问题：

在上面的第一个 // ????️ LOOK HERE 评论中，您会看到，我正在保存对类实例本身的引用（在构造函数中），这会导致两个缺点：

稍后当我在其中添加 7 或 8 个引用时，构造函数会变得非常混乱，这使得它的代码不干净。
我们正在保存对类实例的对象主体的引用，您认为这是一个干净的代码吗？也许 React 中应该有一些东西可以让我将所有引用存储在一个属性中，可能称为“refs”，因此该类的实例如下所示：

{
      refs: {
       searchInputRef: ...
       // later
       buttonRef: ...
       button2Ref: ...
       iconRef: ...
      }
state: ...
// the rest of the component object
 }

如果你问我，哪个更干净。如果我错了，请告诉我。

在第二条评论// ????️ LOOK HERE 当然你可以看到我实际上并不需要参考，那么为什么我使用 ref sys~？我可以简单地从e.target.querySelector("#searchInput") 获取输入，看起来很简单，为什么人们总是说在使用 React 时使用我心爱的 querySelector 来引用 DOM 元素是一种耻辱和不好的做法？

【问题讨论】：

标签： reactjs

【解决方案1】：

好吧，我认为你提到的那些人（那些说使用 DOM 很尴尬的人）是完全错误的！

他们可能从未阅读过ReactJs 的官方文件，只是表达了他们个人（完全错误）的观点。

Stop Overuse Refs!

根据 ReactJs 网站上的documentation，过度使用 Refs 是完全错误的。 ReactJs 建议你甚至不要使用 open() 或 close() modals。

所以我们可以选择的最佳选择是使用 DOM。但这并不意味着 ReactJs 在其库设施中放了一个无用的东西。 一点也不。

So when to Use Refs?

在一些很好的情况下，使用 Refs 是非常经济的。例如，专注于字段或创建多个动画。

在我看来，没有什么是Refs做不到的。另一方面，DOM 没有什么是做不到的。两者功能齐全。

重要的是每个的性能和效率。

DOM 在网络世界中是经过验证的事物，但根据 ReactJs，过度使用 Refs 可能是有害的。

无论如何，这是我想与您分享的 Refs 和 DOM 的总体概述。

我希望其他人就如何更好地使用 Refs 给你一些建议。

最后，还有一个重要的问题。

从您的问题中了解到，您非常关心程序的性能。但我想知道为什么你不使用函数组件而不是类组件？使用函数式组件可以大大提高您程序的性能、效率和速度。我希望您阅读它并通过迁移到函数来提高程序的性能。

请阅读这篇文章：

【讨论】：

【解决方案2】：

起初// ?️ LOOK HERE，

你可以有一个函数来创建 ref，为了区分它们我更喜欢id。

class SearchInput extends React.Component {
  constructor(props) {
    super(props);
  }
  
  refs = {} // ?️ LOOK HERE 
  
  getRef(id) { // ?️ LOOK HERE 
    if (!this.refs.hasOwnProperty(id)) {
        this.refs[id] = React.createRef();
    }
    return this.refs[id];
  }
  

  render() {
    const 
    return (
      <form onSubmit={this.onFormSubmit}>
        <div className="input-group-text">
          {this.props.label}
          &nbsp;
          <input
            type="text"
            className="form-control"
            id="searchInput"
            aria-describedby="emailHelp"
            placeholder="Search"
            ref={this.getRef(id)} // ?️ LOOK HERE, id - you decide 
          />
          &nbsp;
          <button type="submit" className="btn btn-primary">
            <i className="fas fa-search"></i>
          </button>
        </div>
      </form>
    );
  }
}

第二次// ?️ LOOK HERE，我认为有人问过这个问题，你应该搜索一下。

【讨论】：