javascript - 用ref react Canvas ，省略调用ref.current和ctx？

可以省略通话吗

const canvas = canvasRef.current;
const ctx = canvas.getContext('2d');

每次我想在功能或使用效果中引用canvas DOM节点？

const drawCanvas = () => {
  const canvasRef = React.useRef(null);
  const [position, setPosition] = React.useState({});

  React.useEffect(() => {
    const canvas = canvasRef.current;
    const ctx = canvas.getContext('2d');
    ctx.fillRect(0, 0, canvas.width, canvas.height);
  }, []);

  React.useEffect(() => {
    const canvas = canvasRef.current;
    const x = canvas.width;
    const y = canvas.height;
    setPosition({ x, y });
  }, []);

  return <canvas ref={canvasRef} />;
};

我无法将canvasRef.current设置为变量，因为它在第一次迭代时具有空值。

最佳答案

实际上，您不能将当前引用节点设置为变量。

如果必须在不同的组件中实现相同的逻辑，则可以创建自己的钩子：

const useCanvas = (callback) => {
  const canvasRef = React.useRef(null);

  React.useEffect(() => {
    const canvas = canvasRef.current;
    const ctx = canvas.getContext('2d');
    callback([canvas, ctx]);
  }, []);

  return canvasRef;
}

const Canvas = () => {
  const [position, setPosition] = React.useState({});
  const canvasRef = useCanvas(([canvas, ctx]) => {
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    const x = canvas.width;
    const y = canvas.height;
    setPosition({ x, y });
  });

  return (<canvas ref={canvasRef} />);
};

几点评论：


我将您的drawCanvas函数重命名为Canvas-一种更标准的命名React函数组件的方式
上面的自定义钩子适用于一个简单的用例，在初始渲染后它仅运行一次。否则，您可能会遇到这种方法的问题（有关更多详细信息，请参见此处：https://medium.com/@teh_builder/ref-objects-inside-useeffect-hooks-eb7c15198780）