Refs
Refs
所以,作为网页开发者,我们通常使用一组标准的 DOM 原语来构建用户界面:div、按钮、表单等。
但Web也提供了一种完全不同的绘制用户界面的方法:HTML Canvas。
如果你不熟悉,HTML Canvas 提供了一种类似“Microsoft Paint”的功能,可以通过绘制形状来创建图形。我在我的博客上使用它来创建这个有趣的“小磁屑”效果:
为了使用 HTML Canvas,我们首先渲染一个 <canvas> 标签,然后使用 JavaScript 在其上运行一系列命令。它可能看起来像这样:
ctx 是绘图表面。我们可以选择在 2D 或 3D(通过 webgl)中绘制。
问题是:我们如何在 React 中使用这个元素?
让我们讨论:
这是视频中的最终沙盒:
不仅仅是针对 DOM 节点!
由 useRef 钩子创建的 ref 对象应该被视为一个盒子。我们可以在这个盒子里存储我们想要的任何东西:DOM 节点、数字、数组、对象、函数等。
也就是说,refs 的主要用例是存储 DOM 节点。我很少需要在 ref 中存储其他任何东西。