Jquery动画和反应答案

【问题标题】：Jquery animation and reactJquery动画和反应
【发布时间】：2019-02-19 00:43:24
【问题描述】：

我有一个由Javascript, HTML & CSS 编写的网站。另外，在网站上，我有使用Jquery 脚本的网站打开动画。

我注意到在网站（非 React 版本）中，如果我不将 jquery-3.2.1.min.js 脚本包含到 HTML 文件中，动画会卡住，并且页面的其余部分不会出现。

我的老板让我用react 编写网站。当我将（非反应版本）网站转移到反应一个时，我遇到了一个问题。我注意到jquery 脚本不起作用。

有没有办法可以包含jquery-3.2.1.min.js？

更新：我包含来自npm 的Jquery 3.2.1，但仍然不起作用

【问题讨论】：

您想将jQuery 添加到React 项目中吗？
为了制作开场动画，我需要jquert-3.2.1.min.js@MasoudTavakkoli
所以你的基础项目在react?
@MasoudTavakkoli，对不起我的错误解释。我更新了帖子。我有一个由 Javascript、HTML 和 CSS 编写的网站。另外，在网站上，我有使用 Jquery 脚本的网站打开动画。我注意到在网站（非反应版本）中，如果我不将 jquery-3.2.1.min.js 脚本包含到 HTML 文件中，动画会卡住，并且页面的其余部分不会出现。我的老板让我用 react 写网站。当我将（非反应版本）网站转移到反应一个时，我遇到了一个问题。我注意到 jquery 脚本不起作用。

【解决方案1】：

网页在浏览器中渲染时发生了什么？

当我们使用纯 javascript 或 jQuery 处理 DOM 时，我们直接选择 DOM 节点并对其进行操作，从而更新此树结构 (DOM) 并重新渲染（即使有细微的变化）。这对性能不利，而且速度很慢。

但是 react 并不直接操作 DOM。 react 创建一个表示 DOM 的对象并对其进行操作。这个对象被称为 Virtual DOM。

Virtual DOM 是 Real DOM 在内存中的表示。它是一个轻量级的 JavaScript 对象，是 Real DOM 的副本。

当此 Copy 对象的状态发生变化时，React 使用 diff 算法比较旧副本和虚拟 DOM 的更改副本，以找到更新 Real DOM 的最小步骤数。

因此，不建议同时使用这两个库。但在某些情况下，可能需要使用其他库。 React Docs 在 page

上解释了它

你也可以使用一些反应动画库来代替。阅读此article 了解详情。

【讨论】：

【解决方案2】：

React Integrating with Other Libraries

【讨论】：

【解决方案3】：

最初您应该避免在React 项目中使用jQuery。因为 react 使用的是虚拟 DOM 系统，jQuery 无法使用它。

但是对于基本工作，您可以这样做，在componentDidMount() 中的 React 渲染生命周期后调用 jQuery

更多信息来自react docs

class App extends React.Component {
  componentDidMount() {
    // Jquery here $(...)...
  }

  // ...
}

【讨论】：