问题背景：我正在使用React和Redux创建像素艺术应用，编辑器部分是HTML画布。包含像素的网格在画布上绘制，并且每当更新包含每个像素的颜色的状态时都要更新。 State还管理编辑器中当前使用的工具以及画布的大小。
问题
画布的正常更新只是推动位图上的像素。但是，在React中，只要状态更改影响组件，它就会在默认情况下重新呈现。因此，如果您使用componentDidUpdate()以正常的React方式更新画布，则不必清除然后重新绘制位图 - 您每次都要重新渲染整个画布DOM元素。这对我来说似乎非常浪费。
canvas元素的重新渲染是否存在潜在的性能瓶颈？
如果是这样，你在野外使用或看到的一些好的解决方案是什么？
我的一些想法：我知道您可以将shouldComponentUpdate()设置为返回false，这样它就不会重新渲染，但之后您又无法使用componentDidUpdate()在状态发生变化时触发updateCanvas()函数。我认为解决方案可能需要与React-Redux和Redux源进行一些摔跤，以使画布直接订阅商店而不使用React。这不是我之前尝试过的，但我可以看到它是如何运作的。
更新：所以根据我在另一个论坛上与其他人讨论过的其他人，只要状态更新不会改变JSX的结果，反应就足够聪明了重新呈现DOM元素。将ref添加到画布并以这种方式更新它不应该重新渲染DOM元素。这是否是任何人都可以确认/提供更深层次的解释？
答案 0 :(得分：0)
我认为没有解决办法。你还好吧React具有一个差分算法，可以让您的反应如您的朋友所说的那样聪明。您可以在https://reactjs.org/docs/reconciliation.html上阅读更多内容。
由于您是redrawimg画布，因此我唯一能解决的办法就是在例如拖动的情况下延迟下一次渲染。
答案 1 :(得分：0)
在使用pixi.js和three.js时对我有用的解决方案是，通过在shouldComponentUpdate（）函数中返回false并使用简单的js和事件更新画布（清除componentWillUnmount上的侦听器）来避免反应渲染和协调。使用画布时，没有采取任何真正的好处，也没有反应的优势。我建议您对以下主题进行有趣的阅读：https://medium.com/@tibotiber/react-d3-js-balancing-performance-developer-experience-4da35f912484