redux与react18setState触发render问题
最近在做一个需求,需要用im做那个协同。
刚好遇到一个比较有意思的问题。
具体问题就不赘述了。
根本原因就是在修改state的时候,触发了两次重渲染。
后面也是做了一些验证
demo
function App() {
const [state, setState] = useState("");
const dispatch = useDispatch();
const visible = useTypeSelector((state) => state.test.visible);
console.log("render", {
state,
visible,
});
const change = () => {
setState("abc");
dispatch(
changeState({
visible: !visible,
})
);
};
return <div onClick={change}>app {visible ? "visible" : ""}</div>;
}
这是一个很纯粹的demo。
点击之后会渲染多少次呢?
是一次。
好像没问题。
但是在实际遇到的问题是渲染两次,于是为了复刻当时的场景,我把函数放到window,然后直接调用。
function App() {
const [state, setState] = useState("");
const dispatch = useDispatch();
const visible = useTypeSelector((state) => state.test.visible);
console.log("render", {
state,
visible,
});
// @ts-ignore
window.change = () => {
setState("abc");
dispatch(
changeState({
visible: !visible,
})
);
};
return <div>app {visible ? "visible" : ""}</div>;
}
执行一次函数会触发两次渲染。
这么奇怪,当然后面我也以为是状态多少的问题。
组件内定义多几个state也一样的。
那是什么问题呢。
对react比较了解同学应该都知道,state的更改有异步和同步两种。
但是也不合理对吧,如果是同步的,那不应该修改几个state就渲染几次吗?
这就要去看看文档了
这就能解释了。
后面也是用定时器执行了函数,确实也是渲染两次。
后面猜测应该是redux没有做类似自动批处理,所以在一些情况下还是同步更改state,而react18已经做了一些功能调整现在都是异步了,也做了自动批处理,所以就会有类似的问题,当然只是猜测。
redux尝试升级到新版本也存在问题,但是结合场景还是有一些解决办法,这里也就不说了,大家少踩坑,但是踩坑也会提升实力,印象也会更深刻。
原文地址:https://blog.csdn.net/weixin_45696837/article/details/143031044
免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!