如何访问useEffect以外的dom变量

Question

我的画布功能组件太大。我想拆分Class Star和useEffect（初始化，动画）代码。

const Canvas = () => {
   useEffect(() => {
      const canvas = canvasRef.current;
      const context = canvas.getContext('2d');

      Class Star {
         ...
      }

      const init = () => {...};
      const animate = () => {...};
      ...
   }, [])
}

但是我对context有问题，因为Class Star和animate使用了它。 init使用canvas。

Answer 1

使用useState钩子：

const Canvas = () => {
   const [canvas, setCanvas] = useState(null);
   const [context, setContext ] = useState(null);

   useEffect(() => {
      setCanvas(canvasRef.current);
      setContext(canvas.getContext('2d'));

      Class Star {
         ...
      }

      const init = () => {...};
      const animate = () => {...};
      ...
   }, [])
}