反应自定义钩子批量更新

Question

据我了解，useState 钩子的更新函数应该批量运行，而不是每次调用时都重新渲染组件。我创建了以下自定义钩子：

function useObservable(source) {
  const [v, setV] = useState();

  useEffect(() => {
    const subscription = source.subscribe(setV);

    return () => subscription.unsubscribe();
  }, [source]);

  return v;
}

但是当我多次使用它时，每次发射都会导致重新渲染：

const subject = new Subject();

setTimeout(() => {
  subject.next("Value");
}, 1000);

function App() {
  const value = useObservable(subject);
  const value2 = useObservable(subject);
  const value3 = useObservable(subject);

  console.log("render"); <=== called 3 times

  return (
    <div>
      <p>{value}</p>
    </div>
  );
}

有没有办法优化这个？我是不是误解了什么？

Answer 1

看来您使用了 React.StrictMode 模式，这就是您看到 2 个首次渲染的原因。如果在开发中使用useState和React.StrictMode，useState和其他一些函数将导致React双重渲染。React 这样做是为了检测副作用（https://reactjs.org/docs/strict-mode.html#detecting-unexpected-side-effects）。

第三次渲染是由 引起的source.subscribe(setV);。因为你的主题产生值并调用observer( setV)，导致第三次渲染。

如果您删除 React.StrictMode 或在生产中测试它，您将只看到 2 个渲染。

关于 useState 及其导致双重渲染的原因也有很好的解释：React useState Cause双重渲染