React 父组件将state 值传给子组件的 props , 子组件依赖这个props 绘制一个费时操作，影响父组件的更新?

Question

场景： 父组件 P 里有一个input, 绑定组件state 的 inputValue 值, 子组件 C 里有一个canvas, 依赖父组件传进来的 inputValue 绘制， 导致在父组件中输入 input 时卡顿， 请教如何优化？

Answer 1

将原来的一个canvas 变成了两个canvas, inputValue 影响的那部分绘制放到新的canvas 上， 两个canvas 重合。

Answer 2

把 inputValue 提到外面，把组件 P 和 canvas 组件放到同级试试