简单计数器不会停止使用 useEffect 挂钩在功能组件内部递增

Question

我试图在功能组件的 useEffect Hook 中使用 rxjs。

我相信 useEffect 可以像 componentDidMount 和 componentDidUpdate 一样使用。

 const Counter = () => {
  const [state, setState] = useState({counter: 0});
  useEffect(() => {
    subscriber.subscribe((value) => {
        let { counter } = state;
        counter += value;
        setState({ counter });
    });
  });
  return (
    <div>
      <span>Counter: {state.counter}</span>
      <Crementer />
    </div>
  );

订阅者是一个简单的 rxjs 主题

const subscriber = new BehaviorSubject(0);

还有一个组件可以增加/减少计数器

const Crementer = () => {
  return(
    <>
      <button onClick={() => subscriber.next(1)}>+</button>
      <button onClick={() => subscriber.next(-1)}>-</button>
    </>
  )
};

（我也试过 counterService.send(1)）

问题是只要我点击 + 或 - 计数器就会连续递增或递减。

您可以在此处查看行为：https://stackblitz.com/edit/react-9auz4d

可能是因为 useEffect 也在更新时运行？它可能会在带有 componentDidMount() ?

的 class 组件中工作

Answer 1

每次更新都会调用挂钩：https://reactjs.org/docs/hooks-effect.html#explanation-why-effects-run-on-each-update

因此您可以存储订阅 returned 形式的 subscribe 调用，然后将其保存在另一个 useState 中。在每次调用效果时，您只需检查它是否已设置。顺便说一句，您还应该 return 此效果的拆卸功能，这样您也需要订阅。

或者最终你可以使用第二个参数来 useEffect 到运行它只是一次 ():

useEffect(() => {
  const subscription = observable.subscribe((value) => {
    let { counter } = state;
    counter += value;
    setState({ counter });
  });

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

简单计数器不会停止使用 useEffect 挂钩在功能组件内部递增

Simple counter doesn't stop incrementing inside functional component with useEffect hook

rxjs

reactjs

react-hooks