如何在另一个 function 中使用 useEffect() 中声明的变量？

Question

ps 解决了我遇到的问题，但如果你有时间，我仍然想听听你对这个和我的代码的想法:)

我只能在渲染完成后为该变量赋值，所以我假设我必须在 useEffect() 中声明该变量，并且不可能在全局范围内为其赋值（在任何渲染之前执行）。 但我也想在另一个 useEffect() 中使用该变量，但我不能，因为它是在 function 中声明的，它不属于全局 scope。 另外，有两个 useEffect -s 是否正常？ 我需要获取 canvas 的上下文，并保持该上下文一致（不是在每次 DOM 更新时获取新的上下文，因为当我没有将 [] 作为第一个 useEffect 的第二个参数时会发生这种情况）。 另一个是在 state 更改时使用独特的上下文进行操作。 是否有意义？ 我的代码：

import React, { useState, useRef, useEffect } from "react";
import { degreesToRadiansFlipped } from "./helpers/degreesToRadiansFlipped";
function Circle() {
  let [degree, setDegree] = useState(0);
  const canvas = useRef();
  const inputField = useRef();
  const coordinateX = Math.cos(degreesToRadiansFlipped(degree)) * 100 + 250;
  const coordinateY = Math.sin(degreesToRadiansFlipped(degree)) * 100 + 250;

  useEffect(() => {
    const context = canvas.current.getContext("2d");
    drawCircle(context, coordinateX, coordinateY);
    return context;
    /*return function cleanUp() {
      context.clearRect(0, 0, 500, 500);
      context.beginPath();
      drawCircle(context, coordinateX, coordinateY);
    };*/
  }, []);
  useEffect(() => {
    drawCircle(context, coordinateX, coordinateY);
  }, [degree]);
  let drawCircle = function(context, x, y) {
    context.beginPath();
    //arc has option to make it anti-clockwise, making flipping radians redundant
    context.arc(250, 250, 100, 0, Math.PI * 2);
    context.moveTo(250, 250);
    context.lineTo(x, y);
    context.stroke();
  };

  return (
    <div>
      <canvas ref={canvas} width={500} height={500}></canvas>
      <form
        onSubmit={(e) => {
          e.preventDefault();
          setDegree(inputField.current.value);
        }}
      >
        <input type="text" ref={inputField}></input>
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

export default Circle;

Answer 1

是的，当它们在第二个参数中具有不同的 arguments 时，使用多个 useEffect 是有意义的。

您可以将 useEffec 之外的变量声明为未定义。

let context = undefined // is not constant
  useEffect(() => {
    context = canvas.current.getContext("2d");
    drawCircle(context, coordinateX, coordinateY);
    return context;
    /*return function cleanUp() {
      context.clearRect(0, 0, 500, 500);
      context.beginPath();
      drawCircle(context, coordinateX, coordinateY);
    };*/
  }, []);
  useEffect(() => {
    drawCircle(context, coordinateX, coordinateY);
  }, [degree]);

这种方式在 function scope 中可用