jQuery动画并做出反应

Question

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

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

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

有没有办法添加jquery-3.2.1.min.js？

更新：我包含Jquery 3.2.1中的npm，但仍然无法正常工作

Answer 1

最初，您应该在jQuery项目中避免使用React。因为react使用的是虚拟DOM系统，jQuery不能与此配合使用。

但 对于基本作品，您可以执行此操作，在componentDidMount()

中的React render生命周期之后调用jQuery

来自react docs

的更多信息

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

  // ...
}

Answer 2

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

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

2. 浏览器具有一些Api，允许Javascript操作DOM（例如：更改此DOM中特定节点的文本内容或更改某些节点元素的颜色）。

当我们使用Pure javascript或jQuery与DOM一起使用时，我们直接选择DOM节点并对其进行操作，这会导致更新此树结构（DOM）并重新渲染（即使有微小变化）。这对性能不好，而且非常慢。

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

虚拟DOM是真实DOM的内存表示形式。它是轻量级的JavaScript对象，是Real DOM的副本。

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

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

上进行了解释

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