Question

  const [x, setX] = useState();
  const [y, setY] = useState();

  const elementRef = useRef(null);

  // Calculated here based on elementRef (null on initial render, non-null after mount)
  let boundTop;
  let boundRight;
  let boundBottom;
  let boundLeft;

  // Center the stage on mount and ref mount
  useEffect(() => {
    const x = (window.innerWidth / 2) - ((boundRight - boundLeft) / 2);
    const y = (window.innerHeight / 2) - ((boundBottom - boundTop) / 2);
    setX(x);
    setY(y);
  }, [elementRef.current]);

此代码可以正常工作并按预期工作-在初始渲染和引用安装（[elementRef.current]依赖项数组）上，它将X和Y的状态设置为某些初始值，然后不再执行。

但是！默认的Hooks ESLint规则会推动我将bound状态变量作为依赖项添加到useEffect依赖项数组中。我不想那样做！我不希望这些值在初始安装后通过该挂钩再次更改。

如果确实将绑定值添加为效果的依赖项，那么我的画布将永远不会移动，因为每次向画布移动（通过响应鼠标/触摸更改X和Y）都会导致渲染，因此边界将重新计算，钩子相关性发生了变化，X和Y居中，导致画布移动的X和Y的原始移动将撤消。

是否存在用于围绕该ESLint规则进行编码的模式？

Answer 1

useState允许您通过回调设置其initial value，因此根本不需要useEffect。

像这样更改useState并删除整个useEffect：

const [x, setX] = useState(() => (window.innerWidth / 2) - ((boundRight - boundLeft) / 2));
const [y, setY] = useState(() => (window.innerHeight / 2) - ((boundBottom - boundTop) / 2));

ref挂载后一次在useEffect中反应一次Hooks setState挂钩

1 个答案: