在 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 中有一组有限的应用程序。
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