React 渲染两个 p5.js 画布

Question

我正在尝试将 p5.js 与 React 一起使用。由于某种原因，React 不断渲染两个画布。我知道这个问题可以通过关闭 StrictMode 来解决，但我想在处理这个项目时保留严格模式的好处。我尝试过使用清理功能，但这似乎也不起作用。我只使用p5库，但即使我使用react-p5库，这种情况仍然会发生。下面是我的代码。

使用P5.js

import p5 from "p5";
import { useEffect, useRef } from "react";

function useP5(sketch, dep) {
  const p5ref = useRef();

  useEffect(() => {
    const instance = new p5(sketch, p5ref.current);
    return instance.remove;
  }, [sketch, dep]);

  return p5ref;
}

export { useP5 };

应用程序.js

import { useState } from "react";
import { useP5 } from "./hooks/useP5";

function App() {
  const sketch = (p) => {
    p.setup = () => {
      p.createCanvas(400, 400);
    };

    p.draw = () => {
      p.background(200);
      p.ellipse(50, 50, 50, 50);
    };
  };

  const p5Ref = useP5(sketch);

  return (
    <>
      <div ref={p5Ref}></div>
    </>
  );
}

export default App;

这就是我的结果，除非我关闭 StrictMode。

Answer 1

即使我强制进行第二次渲染，您的代码似乎对我来说工作正常。我将分享此代码，以防它有助于调试：

const {StrictMode, useEffect, useRef, useState} = React;

const useP5 = sketch => {
  const p5ref = useRef();

  useEffect(() => {
    const instance = new p5(sketch, p5ref.current);
    return instance.remove;
  }, [sketch]);

  return p5ref;
};

const App = () => {
  const sketch = p => {
    p.setup = () => {
      p.createCanvas(400, 400);
    };
    p.draw = () => {
      p.background(200);
      p.ellipse(50, 50, 50, 50);
    };
  };

  ///// Force a second render ///////
  const [test, setTest] = useState();
  useEffect(() => {
    setTest("force a second render");
  }, []);
  ///////////////////////////////////
  console.log("rendered");

  const p5Ref = useP5(sketch);
  return (
    <StrictMode>
      <div ref={p5Ref}></div>
    </StrictMode>
  );
};

ReactDOM.createRoot(
  document.querySelector("#app")
).render(<App />);

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.js"></script>
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<div id="app"></div>