Как лучше организовать работу с Canvas в React/Redux?

Question

[Владимир]

Подскажите, как можно осуществить/упростить работу с канвасом в реакте? Ведь canvas мутирует напрямую элементы dom, в то время как React отображает данные через виртуальный dom.
К примеру может есть какая то популярная библиотека или даже Фреймворк совместимый с реактовой концепцией программирования? спасибо.

Answer 1

[Максим]

"canvas мутирует напрямую элементы dom" - не совсем понятно, что имеется ввиду. На canvas происходит рисование. Дом не изменяется, изменяется что-то внутри canvas. Следовательно, чтобы к этому "канвасу" (имеется ввиду сам тэг) обратиться, нам понадобиться ref. Например: <canvas ref='myCanvas' width={180} height={30} />.
Второй вопрос, тоже не совсем понятен, что имеется ввиду под "концепцией и совместимостью"? Так как у вас есть ссылка на "канвас" через this.refs.myCanvas - можно далее вытащить context, с помощью getContext и уже дальше работать.

Пример компонента (в зависимости от пришедших данных, рисует столбики повыше, пониже..)

export default class SomeBars extends Component {
  componentDidMount() {
    this.drawBars(this.props)
  }
  drawBars(props) {
    const { data } = props
    const canvas = this.refs.canvas
    const ctx = canvas.getContext('2d')
    ctx.clearRect(0, 0, canvas.width, canvas.height)

    const tempData = data ? data.slice(0,60) : []

    tempData.forEach((item,index) => {
      ctx.fillStyle = 'rgba(3,169,244,1)'
      ctx.fillRect(index*3, 30, 2, -(item/2))
    })
  }
  render() {
    return <canvas ref='canvas' width={180} height={30} />
  }
}

Если же речь, про canvas и поддержку тасканий мыши и всяких крутых штук (например, как умеет fabric.js) - то можно почитать на SO

Так же, гугл как обычно, выдает несколько ссылок, например.