在 React 中正确使用 jQuery

Irakli Tchigladze 2023年1月30日 2022年5月18日
  1. 在 React 中你能使用 jQuery
  2. 在 React 中使用 jQuery 的正确方法
  3. 在 React 中你应该使用 jQuery
在 React 中正确使用 jQuery

jQuery 是 JavaScript 开发人员使用的最知名的库之一。

该库提供了一种简单的方法来执行 DOM 操作和动画,仅举几例。由于它的流行,许多 Web 开发人员都熟悉它,并且在可能的情况下更喜欢使用 jQuery。

React 是 Facebook 开发的另一个流行的库。在过去的几年里,它赢得了使用最广泛的 JavaScript 框架的称号。

可以说它比 jQuery 更现代并且具有更多功能。虽然你可以在单个应用程序中使用这两个库,但在 React 应用程序中使用 jQuery 有一些规则。

在 React 中你能使用 jQuery

可以在 React 应用程序中使用 jQuery,只要你正确使用它并仔细选择它的位置。同样,你可以将 React 嵌入到 jQuery 中。

React 中 jQuery 的局限性是什么

在 React 中使用 jQuery 的主要限制是 jQuery 手动更新 DOM。另一方面,React 有其对 DOM 进行更改的系统。

它在内部确定 React 应用程序或组件何时应该重新渲染。它还计算出 UI 的哪些部分需要更新。

因此,当你使用 jQuery 操作 DOM 时,React 会感到困惑。这就是为什么在正常情况下,在 React 中使用 jQuery 被认为是一种不好的做法,但也有例外。

在 React 中使用 jQuery 的正确方法

首先,你需要安装 jQuery 库,然后将其导入,如下所示:

import $ from 'jquery';

正如我们已经提到的,jQuery 和 React 是两个与 DOM 操作有关的库。为了确保 jQuery 不会干扰 React,我们需要创建一个永远不会被 React 更新的组件。

我们应该怎么做?你可能知道,React 组件在它们的 stateprops 更改时会重新渲染。所以我们必须构建一个没有任何状态props 的组件。

让我们看一个例子:

class App extends Component {
  componentDidMount(){
        $("p").hide()
  }
  render() {
    return <div>
              <p>Hi! Try edit me</p>
           </div>;
  }
}

为了确保 React 永远不会更新 App 组件的 DOM,我们不会启动任何状态或使用任何 prop 值。我们的 return 语句由静态包装器和段落元素组成。

这样,我们就可以为 jQuery 插件直接操作 DOM 和隐藏所有段落元素扫清障碍了。

另一个直接选择 DOM 元素的好方法是使用 ref

在 React 中你应该使用 jQuery

React 具有内置功能,允许你在大多数情况下操作 DOM。在 React 组件的框架内工作使你能够控制应用程序的行为和外观。

如果你确定需要使用 jQuery 并保持在上述限制范围内,那么你可以自由地这样做。然而,jQuery 在 React 中有一组有限的应用程序。

Irakli Tchigladze avatar Irakli Tchigladze avatar

Irakli is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.

LinkedIn