我有一个由 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
,但仍然不起作用
最佳答案
当网页在浏览器中呈现时发生了什么?
浏览器为调用 Document Object Model 的页面创建文档树结构或 DOM。
浏览器有一些 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了解详情。
关于javascript - Jquery 动画和 react ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52327960/