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

问题描述

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

解决方案

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

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

停止过度使用 Refs！

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

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

那么什么时候使用 Refs 呢？

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

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

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

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

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

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

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

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