4、React 中的图形绘制、数据映射及交互实践

React 中的图形绘制、数据映射及交互实践

在 React 开发中，我们常常会遇到需要编写简洁代码、绘制图形、处理数据映射以及实现用户交互等场景。下面将详细介绍相关的方法和实践。

简洁代码编写：内联引用赋值

在处理引用时，有一种编写更少代码的方法。通常我们会先定义变量，再在组件中进行赋值，但其实可以内联完成这个操作。

// 设置 ref
ref: SVGCircleElement | undefined
// 在 JSX 代码中内联分配 ref
<canvas
  ref={canvasRef} />
  // eslint-disable-next-line no-return-assign
  ref={(ref: SVGCircleElement) => (this.ref = ref)}
/>

不过，这种代码并不够简洁，因为根据最佳编码实践，我们不应该返回赋值操作。所以添加了 ESLint 注释来避免其报错。由于代码存在一定的歧义，这种方法并不推荐，但可以作为一种了解的选项。

图形绘制：Canvas 与 SVG

在图形绘制方面，我们可以使用 Canvas 和 SVG。

Canvas 缩放

可以使用 context.scale 根据屏幕大小调整 Canvas，避免放大时变模糊。

const { devicePixelRatio: ratio = 1 }