React 自定义钩子批量更新

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);引起的。因为您的主题产生价值并调用导致第三次渲染的观察者（setV）。

如果您删除 React.StrictMode 或在生产环境中对其进行测试，您将只能看到 2 个渲染。

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