最近在做一个需求，需要用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-ignorewindow.change = () => {setState("abc");dispatch(changeState({visible: !visible,}));};return <div>app {visible ? "visible" : ""}</div>;
}
执行一次函数会触发两次渲染。
这么奇怪，当然后面我也以为是状态多少的问题。
组件内定义多几个state也一样的。
那是什么问题呢。
对react比较了解同学应该都知道，state的更改有异步和同步两种。
但是也不合理对吧，如果是同步的，那不应该修改几个state就渲染几次吗？
这就要去看看文档了
这就能解释了。
后面也是用定时器执行了函数，确实也是渲染两次。
后面猜测应该是redux没有做类似自动批处理，所以在一些情况下还是同步更改state，而react18已经做了一些功能调整现在都是异步了，也做了自动批处理，所以就会有类似的问题，当然只是猜测。
redux尝试升级到新版本也存在问题，但是结合场景还是有一些解决办法，这里也就不说了，大家少踩坑，但是踩坑也会提升实力，印象也会更深刻。
