使用React

Question

我正在尝试在react组件中实现此https://github.com/mourner/simpleheat插件，但无法确定：

1. 如何创建全局变量

let heat = SimpleHeat(canvas).data(data) 

以使draw和handleMouse函数可以访问的方式

我认为问题在于我必须在draw函数中重新初始化simpleHeat，它会覆盖已经存在的数据，但是由于某种原因也不会创建任何新内容。

1. 在与requestAnimationFrame反应时，实现动画的一般方法是什么？

我已经尝试在SO和github上进行搜索，但到目前为止还没有找到带有React的实现

import React, { Component } from 'react'
import SimpleHeat from 'simpleheat'

export default class CanvasComponent extends Component {

  canvasRef = React.createRef();
  state = {
    x: 0,
    y: 0,
    canvas: this.canvasRef,
    // heat: SimpleHeat()
  }

  componentDidMount() {
    this.updateCanvas()

  }

  draw = () => {
    console.time('draw')
    let heat = SimpleHeat(this.canvasRef.current)
    console.log('called Frame:',frame)
    heat.draw()
    let frame = null
    console.log('called Frame:',frame)
    console.timeEnd('draw')
  }



  handleMouse = (e) =>{
    // console.log(e)
    console.log('canvas',this.state.canvas.current)
    // console.log('anotherCanv', this.canvasRef.current)

    let data = [[38, 20, 1], [38, 690, 1], [48, 30, 1]];
    // this.setState({x: e.screenX, y: e.screenY})
    let heat = SimpleHeat(this.canvasRef.current).data(data)
    let frame;
    heat.add([e.screenX,e.screenY, 1])

    console.log('e.screenX,e.screenY:', e.screenX,e.screenY)

    console.log(heat)
    frame = frame || window.requestAnimationFrame(this.draw)

  }



  updateCanvas() {
    let data = [[38, 20, 1], [38, 690, 1], [48, 30, 1]];
    let heat = SimpleHeat(this.canvasRef.current).data(data)

    console.log('heat:', heat)
    this.do(heat)
    // this.timer()
    // let data = [[38, 20, 1], [38, 690, 1], [48, 30, 1]];

    // let heat = SimpleHeat(this.canvasRef.current).data(data)

    window.requestAnimationFrame = window.requestAnimationFrame
    || window.mozRequestAnimationFrame
    || window.webkitRequestAnimationFrame
    || window.msRequestAnimationFrame
    const canvas = this.canvasRef.current
    heat.draw()


    canvas.onMouseMove = (e) => {

      heat.add([this.state.x, this.state.y,1])
      console.log('worked:')
      // const frame = frame || window.requestAnimationFrame(this.do)
    }
  }

  render() {
    const {x, y} = this.state
    return (
      <div>
        <canvas onMouseMove={this.handleMouse} ref={this.canvasRef} width={500} height={500}/>
        <h1>{x}, {y}</h1>
      </div>
    )
  }
}