javascript - react 生命周期与 react Hook useEffect

Question

我目前正在将我的应用程序文件从具有生命周期事件(例如 componentDidMount)的 class 更改为具有 useEffect 的 functions钩子(Hook)。

对于大多数文件，我没有发现任何问题，但在下面，我遇到了性能问题，即应用程序卡住。控制台中的错误或警告为零，但我的机器和 Chrome 增加了此选项卡上使用的内存。

我错过了什么？

基于旧类的文件代码

listener: any;

componentDidMount() {
  const { firebase } = this.props;
  this.listener = firebase.onAuthUserListener(
    (authUser: any) => {
      localStorage.setItem('authUser', JSON.stringify(authUser));
      this.setState({ authUser });
    },
    () => {
      localStorage.removeItem('authUser');
      this.setState({ authUser: null });
    }
  );
}

componentWillUnmount() {
  this.listener();
}

新的钩子(Hook)(导致性能问题)

const listener = () => {
  firebase.onAuthUserListener(
    (authUser: any) => {
      localStorage.setItem('authUser', JSON.stringify(authUser));
      setState(authUser);
    },
    () => {
      localStorage.removeItem('authUser');
      setState(null);
    }
  );
};

useEffect(() => {
  listener();
  return () => {
    listener();
  };
});

可能还值得注意的是，我将 TypeScript 与 React 结合使用。

Answer 1

onAuthUserListener 返回一个取消订阅的函数。这应该在组件卸载时使用。

在您的代码中，您没有返回取消订阅功能。

const listener = () => {
  firebase.onAuthUserListener(..)    // problem here no return
}

所以在 useEffect 下你应该正确分配它并在 useEffect 的返回中使用它。

const [user, setUser] = React.useState(null);

useEffect(
  () => {
    //             v------ proper assignment.
    const listener = firebase.onAuthUserListener(
      (authUser: any) => {
        localStorage.setItem('authUser', JSON.stringify(authUser));
        setUser(authUser);
      },
      () => {
        localStorage.removeItem('authUser');
        setUser(null);
      }
    );

    return () => listener();
  }
  , [] // no deps
);