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

【问题标题】：How to migrate jQuery functions and events in gatsby?如何在 gatsby 中迁移 jQuery 函数和事件？
【发布时间】：2021-10-31 05:28:10
【问题描述】：

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

旧网站是纯粹用 HTML 和 jQuery 构建的，并且有许多带有 jQuery 函数的漂亮动画。

技术上，我通过自定义html.js成功导入了一些外部脚本，包括jQuery(v3.3.7)和Bootstrap(3.3.1)。

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

我认为有点困难的是在旧的 HTML 文件中使用带有 onmouseover 之类的事件的 jQuery 函数。

例如，

...
      <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 函数和事件属性，我该怎么办？

提前致谢。

【问题讨论】：

标签： html jquery reactjs gatsby

【解决方案1】：

onmouseover 应替换为 onMouseOver 或 onMouseEnter/onMouseLeave。

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

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

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

两者（jQuery 和 React）有不同的用途，你不应该混合使用它们，这会导致你遇到巨大的警告和头痛。

此外，window in Gatsby needs to be treated specially (like any other global objects, like document) 因为没有window 的 SSR（Server-Side-Rendering）因为它甚至还没有定义。根据您的触发器和用例，您可能需要将其包装在内部：

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

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

它提供了一些有用的提示来卸载所有 jQuery 函数。

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

【讨论】：