小编au.*_*.re的帖子

我试图在反应应用程序中使用p5(https://p5js.org/)并且一些草图的性能非常差(在开发中与构建应用程序后相同).我正在使用create-react-app项目脚手架,而不对构建设置进行任何更改.

在浏览器中直接运行草图时,草图运行大约50-60fps,但是当加载到反应中时,它们会下降到大约1-2fps.

我正在连接草图,反应如下:

// React Component to interface the sketches
class P5Wrapper extends React.Component {

  componentDidMount() {
    const { sketch, ...rest } = this.props;
    this.canvas = new p5(sketch(rest), this.wrapper);
  }

  componentWillReceiveProps(newProps) {
    const { sketch, ...rest } = newProps;

    if (this.props.sketch !== newProps.sketch) {
      this.canvas.remove();
      this.canvas = new p5(newProps.sketch(rest), this.wrapper);
    }

    if (typeof this.canvas.onNewProps === "function") {
      this.canvas.onNewProps(newProps);
    }
  }

  componentWillUnmount() {
    this.canvas.remove();
  }

  render() {
    return <div ref={(wrapper) => this.wrapper = wrapper} />; …

我正在编写一个存储增强器来通过 redux 存储公开我的库 API。

// consumer of the library

import React from "react";
import ReactDOM from "react-dom";
import { Provider, useStore } from "react-redux";
import { createStore, applyMiddleware, compose } from "redux";
import { myEnhancer } from "myLib";

const reducer = () => ({}); 

const store = createStore(reducer, compose(
  myEnhancer,
));

function SomeComponent() {
  const { myLib } = useStore();

  return (
    <button onClick={() => myLib.doSomething()}>
      click!
    </button>);
}

function App() {
  return (
    <Provider store={store}>
      <SomeComponent />
    </Provider>);
} …