React canvas 与 ref 省略调用 ref.current 和 ctx？

Question

是否可以省略调用

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

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

Answer 1

的确，您不能将当前引用节点设置为变量。

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

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）

React canvas 与 ref 省略调用 ref.current 和 ctx？

React canvas with ref omitting calling ref.current and ctx?

javascript

canvas

ref

reactjs