反应自定义钩子批更新

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

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

第三次渲染是由源代码引起的。订阅（setV） 。因为主体生成值并调用观察者（setV），从而导致第三次渲染。

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

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