javascript - Jquery 动画和 react

Question

我有一个由 Javascript、HTML 和 CSS 编写的网站。此外，在网站中，我有使用 Jquery 脚本的网站打开动画。

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

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

有什么方法可以包含 jquery-3.2.1.min.js 吗？

更新:我从 npm 中包含了 Jquery 3.2.1，但仍然不起作用

Answer 1

当网页在浏览器中呈现时发生了什么？

1. 浏览器为调用 Document Object Model 的页面创建文档树结构或 DOM。

2. 浏览器有一些 Api 允许 javascript 操作 DOM(例如:更改此 DOM 中特定节点的文本内容或更改某些节点元素的颜色)。

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

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

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

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

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

您也可以改用一些 React 动画库。阅读此 article了解详情。