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）！