反应画布与 ref 省略调用 ref.current 和 ctx？答案

【问题标题】：React canvas with ref omitting calling ref.current and ctx?反应画布与 ref 省略调用 ref.current 和 ctx？
【发布时间】：2019-08-16 20:26:00
【问题描述】：

是否可以省略调用

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

每次我想在函数或 useEffect 挂钩中引用 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} />;
};

【问题讨论】：

标签： javascript reactjs canvas ref

【解决方案1】：

确实，您不能将当前 ref 节点设置为变量。

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

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）

【讨论】：