如何将React与p5.js结合使用

Question

我非常喜欢p5.js和react.js，所以想知道如何将它们结合起来，但我无法做到，因此需要您的帮助。 我无法提供任何代码示例，因为我不知道如何开始。

所以我想做的是： 1. 创建一个基于React的应用 2. 使用p5.js渲染画布（我不需要p5.dom和p5.sound）

- user11114318

---

您可以先查看此库：https://www.npmjs.com/package/react-p5-wrapper。 - Julian

Answer 1

首先需要做的是安装create-react-app 工具。一旦它安装好并运行，就可以包含p5.js和react-p5-wrapper 包；假设使用像npm这样的包管理器，可以通过执行npm install p5 react-p5-wrapper命令来完成操作，可以根据需要添加标志。

react-p5-wrapper是一个包装组件，接收一个参考（实例模式）以及使用一些React组件“生命周期方法”相应地进行操作，主要通过执行名为myCustomRedrawAccordingToNewPropsHandler(props)的方法，在所述草图中定义该方法。

为了尝试并查看其运行情况，可以修改App.js文件的内容如下：

import React, { Component } from 'react';
import P5Wrapper from 'react-p5-wrapper';
import sketch from './sketches/sketch';
import './App.css';

class App extends Component {
  constructor(){
    super();
    this.state = {color:[Math.random()*255, Math.random()*255, Math.random()*255]};
    this.randomColor = this.randomColor.bind(this);
  }

  randomColor(){
    this.setState({color:[Math.random()*255, Math.random()*255, Math.random()*255]}
    )
  }

  render() {
    return (
      <div>
        <button onClick={this.randomColor}>Random Color</button>
        <P5Wrapper sketch={sketch} color={this.state.color}></P5Wrapper>
      </div>
    );
  }
}

export default App;

这里使用了sketch，它是从另一个文件夹中的sketch.js导入的，具体来说文件夹名为sketches：

export default function sketch(p){
    let canvas;

    p.setup = () => {
      canvas = p.createCanvas(300, 200);
      p.noStroke();
    }

    p.draw = () => {
      p.background('orangered');
      p.ellipse(150, 100, 100, 100);
    }

    p.myCustomRedrawAccordingToNewPropsHandler = (newProps) => {
      if(canvas) //Make sure the canvas has been created
        p.fill(newProps.color);
    }
}

如果一切正常，屏幕上会有一个按钮和一个素描图，每次按下按钮时，素描中的圆圈都会随机改变颜色。

需要注意的是，在包装器的componentDidMount和componentWillReceiveProps“生命周期方法”中调用了myCustomRedrawAccordingToNewPropsHandler函数，后者目前被分类为不安全的。

- Julian

---

谢谢Julian。这个完美运行！但如果我想使用其他附加库，例如p5.sound，它就不能工作了吗？ - Vennsoh

Answer 2

react-p5

这个组件允许你将 p5 SKetch 集成到你的 React 应用程序中。 演示, 文档

对于高级用法，请阅读这篇博客文章

安装

npm i react-p5

用法

import React, { Component } from "react";
import Sketch from "react-p5";

export default class App extends Component {
  x = 50
  y = 50

  setup = (p5, parent) => {
    p5.createCanvas(500, 500).parent(parent)
  }
  draw = p5 => {
    p5.background(0)
    p5.ellipse(this.x, this.y, 70, 70)
    this.x++
  }

  render() {
    return <Sketch setup={this.setup} draw={this.draw} />
  }
}

- user11722559

---

你被踩的原因可能是你只贴了代码，没有任何解释。 - noitse

Answer 3

这也可以在不使用任何第三方库和函数组件的情况下完成。

安装：

在运行create-react-app之后，使用npm install p5安装p5包。

代码：

在App.js文件中：

import './App.css';
import { useEffect, useRef } from 'react';
import p5 from 'p5';

function sketch(p) {
    // p is a reference to the p5 instance this sketch is attached to
    p.setup = function() {
        p.createCanvas(400, 400);
        p.background(0);
        p.circle(200, 200, 400);
    }

    p.draw = function() {
        // your draw code here
    }
}

function App() {
    // create a reference to the container in which the p5 instance should place the canvas
    const p5ContainerRef = useRef();

    useEffect(() => {
        // On component creation, instantiate a p5 object with the sketch and container reference 
        const p5Instance = new p5(sketch, p5ContainerRef.current);

        // On component destruction, delete the p5 instance
        return () => {
            p5Instance.remove();
        }
    }, []);

    return (
        <div className="App" ref={p5ContainerRef} />
    );
}

export default App;

进一步解释：

当创建 App 组件时，它将引用 p5ContainerRef.current 设置为自身。运行 useEffect 钩子并创建一个新的 p5 实例 p5Instance，使用 sketch 函数和包含节点 p5ContainerRef.current 作为参数。通过返回运行 p5Instance.remove() 的函数，当 App 组件被销毁或重新渲染时，p5Instance 就会被销毁。这可以防止多个具有自己画布的 p5 实例。

这段代码展示了像 react-p5 这样的库在其核心中所做的事情。它们确保一个 p5 实例附加到包装容器上，并且当其包装组件被销毁或重新渲染时，p5 实例也会被销毁。

附注：

您可以将 App 组件重命名为类似于 P5Component 的名称，并将其导入到任何现有的 React 应用程序中。

- Chris Schuller

---

当我们需要渲染一个组件时，怎么办呢？ - undefined