HTML-холст и рисование в отдельных компонентах

Question

Создание CAD-подобного приложения. У меня есть компонент, содержащий холст.В componentDidUpdate я рисую графику

render() {   
  return <canvas ref={c => this.canvas = c}/> 
}

componentDidUpdate() {
   // drawing
   const context = canvas.getContext("2d");  
   ....
}

Я хочу разделить рисунок на отдельный компонент.

render() {   
  return (
    <canvas ref={c => this.canvas = c}/> 
    <Drawing ref={c => this.drawing = c} 
             getCanvas={() => this.canvas} />
  );
}

componentDidUpdate() {
   this.drawing.draw();
}

const context = canvas.getContext("2d");  
   ....
}

// drawing component
class Drawing extends Component {
  draw() {
    const context = this.props.getCanvas.getContext("2d");
    ...
  }

  render() { return null }
}

Это прекрасно работает, но кажется не элегантным (вызов this.drawing.draw() выглядит плохо).А позже я хочу подключить этот компонент Drawing к Redx.Но, чем в компоненте Drawing, я должен использовать render, что называется, если хранилище редуксов изменилось.

Я запутался, как это сделать.Рисовать в функции render?