如何在 gatsby 中迁移 jQuery 函数和事件？

Question

我目前正在将一个古老但仍然很漂亮的网站迁移到 Gatsby PWA。

旧网站是纯HTML和jQuery搭建的，有很多漂亮的动画，有jQuery的功能。

从技术上讲，我通过自定义 html.js.

成功导入了一些外部脚本，包括 jQuery(v3.3.7) 和 Bootstrap(3.3.1)

我还更新了一些属性名称，例如 class 到 className、style - 字符串到对象等

我认为有点困难的是在旧 HTML 文件中将 jQuery 函数与 onmouseover 等事件一起使用。

例如，

...
      <div className="section">
        <div className="block_information" id="block_information">
          <div className="row first_row">
            <div className="col-md-2 col-xs-12 icon_block_information top">
              <div className="svg_text" onmouseover="runSmile()">
                                        ~~~~~~~~~~~~~~~~~~~~~~~~
                <svg viewBox="0 0 80.25 80.25">
                  ...
                  <g id="icon_smile_1">
                    <path
                      id="icon_smile"
                      className="cls-2"
                      ...

和runSmile函数看起来像，

function runSmile() {
  window.ks = (function () {
    function z(a) {
      return "undefined" !== typeof a;
    }

    function v(a, b) {
      return a && 0 == a.indexOf(b);
    }

    function N(a) {
      if (!isFinite(a)) throw "non-finite value";
    }

    function O(a) {
      if (14 >= a) return 16;
      (a = X[a]) || (a = 0);
      return a;
    }

    function D(a) {
      return 0 <= a ? Math.pow(a, 1 / 3) : -Math.pow(-a, 1 / 3);
    }
    ...
  document.ks = ks;
  (function (ks) {
    ks.animate(
      "#icon_smile",
      [{ p: 6, t: [0, 1000], v: [0, 360], e: [[0], [0]] }],
      {
        autoplay:
          document.location.search
            .substr(1)
            .split("&")
            .indexOf("autoplay=true") < 0,
      },
    );
  })(ks);
}

在这种情况下，我可以使用 jQuery 函数，仅进行少量更新，并且不将 onmouseover 等事件属性更新为 onFocus 吗？

如果我必须更新 jQuery 函数和事件属性，我应该怎么做？

提前致谢。

Answer 1

onmouseover 应替换为 onMouseOver 或 onMouseEnter/onMouseLeave.

但是，我不鼓励您将 jQuery 和 Bootstrap 导入到 React 项目中（真的，不要这样做）。

jQuery 和 Bootstrap 指向并直接操作真实的 DOM，而 React 创建并操作虚拟的 DOM (vDOM)。因此，React 永远不会意识到 jQuery 对 DOM 所做的更改，反之亦然，这会转化为 hydration 问题。实际上，这意味着您的组件（或其中的一部分）可能不会在您需要时或在不同的用例中呈现，尤其是当您在页面中执行某种导航时，失去对代码流的控制。

此外，由于工作方式不同（DOM vs vDOM），jQuery 应用于 React 环境的函数将永远不会卸载。这听起来可能毫无意义，但您的资源会不断积累，最终您的网站会变得极其缓慢，尤其是对于停留时间超过 X 秒的用户。

两者（jQuery 和 React）都有不同的用途，您不应该将它们混用，这会给您带来巨大的警告和麻烦。

另外，window in Gatsby needs to be treated specially (like any other global objects, like document)因为SSR(Server-Side-Rendering)，这里没有 window 因为它还没有定义。根据您的触发器和用例，您可能需要将其包装为 inside:

if(typeof window !== 'undefined'){
  // your window stuff
}

如果您仍然在 React 环境中继续使用 jQuery，您可以关注：https://reactjs.org/docs/integrating-with-other-libraries.html

它提供了ide一些有用的提示来卸载所有 jQuery 功能。

关于 Bootstrap，我建议使用 React-based version 来避免我之前解释过的相同水合作用问题。

如何在 gatsby 中迁移 jQuery 函数和事件？

How to migrate jQuery functions and events in gatsby?

html

jquery

reactjs

gatsby