p5.js配合React开发：组件props更新时如何刷新内部sketch实例

你遇到的核心问题是初始化p5实例时，sketch函数闭包捕获了初始的props值，后续props更新后sketch内部拿到的还是旧值，以下是两种原生实现方案，无需引入第三方封装库：

方案1：轻量更新（推荐，无需重建sketch实例，性能最优） #

通过共享可变变量同步最新props，不需要销毁重建整个sketch，适合大部分场景：

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

const View2 = props => {
    // 存储p5实例引用
    const p5InstanceRef = useRef(null);
    // 存储最新的props值，供sketch读取
    const latestDataRef = useRef(props.dataFromSibling);

    const Sketch = (p) => {
        p.setup = () => {
            p.createCanvas(400, 400);
        }

        p.draw = () => {
            p.background(255, 0, 0);
            // 直接读取ref里的最新值
            p.print(latestDataRef.current);
            // 你也可以直接用latestDataRef.current做绘制逻辑
            p.circle(latestDataRef.current, 200, 50);
        }
    }

    useEffect(() => {
        // 初始化p5实例
        p5InstanceRef.current = new p5(Sketch);
        // 组件卸载时销毁实例，避免内存泄漏
        return () => {
            p5InstanceRef.current?.remove();
        }
    }, []);

    // 监听props变化，更新ref存储的最新值
    useEffect(() => {
        latestDataRef.current = props.dataFromSibling;
    }, [props.dataFromSibling]);

    return (
        <></>
    );
}

export default View2;

改动说明： #

• 用useRef存储最新的props值，ref的变更不会触发组件重渲染，同时sketch始终可以读取到最新的current属性值
• 新增了实例销毁逻辑，避免组件卸载后残留p5实例
• 不需要改动原有sketch的核心逻辑，改造成本极低

方案2：重建实例（适合props变化后需要完全重置sketch的场景） #

如果你的业务逻辑需要props变化后重新执行setup、清空之前的绘制状态，可以选择销毁旧实例后新建：

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

const View2 = props => {
    const p5InstanceRef = useRef(null);

    const Sketch = (p) => {
        p.setup = () => {
            p.createCanvas(400, 400);
            // 每次重建都会用最新的props做初始化逻辑
            console.log('sketch重置，最新值为', props.dataFromSibling)
        }

        p.draw = () => {
            p.background(255, 0, 0);
            p.print(props.dataFromSibling);
        }
    }

    useEffect(() => {
        // 先销毁旧实例
        p5InstanceRef.current?.remove();
        // 用最新props创建新实例
        p5InstanceRef.current = new p5(Sketch);
        // 卸载时销毁
        return () => {
            p5InstanceRef.current?.remove();
        }
    // 把props加入依赖数组，变化就触发重建
    }, [props.dataFromSibling]);

    return (
        <></>
    );
}

export default View2;

改动说明： #

• 把需要触发sketch重置的props加入useEffect的依赖数组
• 每次依赖变化先销毁旧实例，再创建新实例，新实例会捕获最新的props值
• 性能略低于方案1，适合需要完全重置绘制状态的场景

内容的提问来源于stack exchange，提问作者elo