我目前正在将我的应用程序文件从包含
componentDidMount
等生命周期事件的class
更改为使用useEffect
钩子的function
。对于大多数文件,我没有看到任何问题,但是在下面这个文件中,我遇到了性能问题,应用程序会冻结。控制台中没有任何错误或警告,但我的机器和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();
}
使用钩子(导致性能问题)的新功能
const listener = () => {
firebase.onAuthUserListener(
(authUser: any) => {
localStorage.setItem('authUser', JSON.stringify(authUser));
setState(authUser);
},
() => {
localStorage.removeItem('authUser');
setState(null);
}
);
};
useEffect(() => {
listener();
return () => {
listener();
};
});
值得一提的是,我在使用React时还使用了TypeScript。