代码在这里:https://codesandbox.io/s/nw4jym4n0
export default ({ name }: Props) => {
const [counter, setCounter] = useState(0);
useEffect(() => {
const interval = setInterval(() => {
setCounter(counter + 1);
}, 1000);
return () => {
clearInterval(interval);
};
});
return <h1>{counter}</h1>;
};
问题是每次setCounter触发重新渲染,因此间隔重置并重新创建.这可能看起来很好,因为状态(计数器)保持递增,但是当与其他挂钩组合时它可能会冻结.
这样做的正确方法是什么？在类组件中,使用保持间隔的实例变量很简单.
假设我有一个应该为所有URL加载的全局配置。
例如：
/
/users
/users/abc
我可以手动将解析器一个接一个地添加到所有url，但是在那种情况下，我必须从捕获路由数据的每个组件中更新全局配置，对吗？有没有更好的方法来解决这个问题？
假设我们有多个模块：
App Module
/login
/sign-up
User Module
/user/list
/user/:id
Product Module
/product/list
/product/:id
@DeborahK的解决方案，我们仍然必须在每个模块的根路由中添加解析器，我可以肯定地说这肯定可以工作。但是，有没有一种方法可以一次申请一次？