React 组件与 p5.js canvas 重复

Question

我正在尝试使用单个 p5.js 草图创建一个 React 应用程序。但是，包含 p5 草图的组件正在我的页面上复制。不知道为什么会这样呈现。

在这里你可以看到代码：https://stackblitz.com/edit/react-ts-kocwqw?file=App.tsx,Sketch.tsx,index.tsx

以下是 React 组件定义：

应用程序.tsx

import React = require('react');
import Sketch from './Sketch';

function App() {
  return (
    <div className="App">
      <Sketch />
    </div>
  );
}

export default App;

草图.tsx

import React = require('react');
import { useEffect } from 'react';
import p5 from 'p5';

const Sketch = () => {
  const p = (p5: any) => {
    let radius: number;
    p5.setup = () => {
      p5.createCanvas(p5.windowWidth / 2, p5.windowHeight / 2);
      p5.background(0);
      radius = 0;
    };

    p5.draw = () => {
      p5.ellipse(p5.width / 2, p5.height / 2, radius, radius);
      if (radius < 70) radius++;
    };
  };

  useEffect(() => {
    new p5(p);
  }, []);

  return <></>;
};

export default Sketch;

index.tsx

import * as React from 'react';
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';

import App from './App';

const rootElement = document.getElementById('root');
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

我可能会错过什么？

Answer 1

解决方案是从

<StrictMode>

中删除

index.tsx

。

来自文档，

严格模式无法自动为您检测副作用，但它可以通过使副作用更具确定性来帮助您发现它们。 这是通过故意双重调用来完成的...

看起来严格模式是检测副作用的保障措施。

Answer 2

可以在这里找到另一个不删除严格模式的解决方案

https://www.lloydatkinson.net/posts/2022/how-to-prevent-a-duplicated-canvas-when-using-p5-and-react-strict-mode/