在 React 中正确使用 jQuery

1. 在 React 中你能使用 jQuery
2. 在 React 中使用 jQuery 的正确方法
3. 在 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 组件在它们的 state 或 props 更改时会重新渲染。所以我们必须构建一个没有任何状态或 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 中有一组有限的应用程序。