时间戳

首页 > 解决方案 > React：为什么从 useRef 更改 ref 的当前值不会在这里触发 useEffect

reactjs - React：为什么从 useRef 更改 ref 的当前值不会在这里触发 useEffect

问题描述

我有一个问题useRef：如果我添加ref.current到 的依赖项列表中useEffect，并且当我更改 的值时，不会触发ref.current其中的回调。useEffect

例如：

export default function App() {
  const myRef = useRef(1);
  useEffect(() => {
    console.log("myRef current changed"); // this only gets triggered when the component mounts
  }, [myRef.current]);
  return (
    <div className="App">
      <button
        onClick={() => {
          myRef.current = myRef.current + 1;
          console.log("myRef.current", myRef.current);
        }}
      >
        change ref
      </button>
    </div>
  );
}

不应该是在useRef.current发生变化时，里面的东西useEffect就会运行吗？

我也知道我可以useState在这里使用。这不是我要问的。而且我知道ref在重新渲染期间保持参考不变，所以它不会改变。但我没有做类似的事情

 const myRef = useRef(1);
  useEffect(() => {
    //...
  }, [myRef]);

我将current值放在 dep 列表中，因此应该会发生变化。

标签： reactjs

解决方案

https://reactjs.org/docs/hooks-reference.html#useref

请记住，当其内容发生变化时，useRef 不会通知您。改变 .current 属性不会导致重新渲染。如果你想在 React 将 ref 附加或分离到 DOM 节点时运行一些代码，你可能需要使用回调 ref 来代替。

推荐阅读