【react】僵尸children与陈旧props问题

陈旧props问题"/>

【react】僵尸children与陈旧props问题

前言

• 以前我文章草稿箱里一直躺着篇还没整完的这问题，结果我自己一直没整明白呢，bug倒是给官方修好了。
• 这个bug来源于react-redux，这个库还是很有名的，当时发现bug时我的水平要是比现在还高说不定还能拿个contributor。确实这个问题过于复杂了，会涉及很多关于react调度方面的知识。

僵尸children与陈旧Props

• 在react-redux官网里，就有介绍这个bug的，另外还有人写了个长文分析：/posts/Stale-props-and-zombie-children-in-Redux
• 在这个文章里，除了一些能想到的解决方法， 比如当时我的解决方法就是把useSelector全干了，统一换成connect传来的。还有很多其他例子都可以试一试。可惜现在这个问题的复现确实比较难，没搞对版本，甚至要看看会不会是react版本影响了结果。
• 当然，各位可以不用照着这个长文敲例子了，我已经试过了，最新的包用上面例子没啥问题，也不会有boom。（老版本有，我就是因为这问题才知道这bug的）
• 当时记得报错是You may not call store.getState() while the reducer is executing ，实际就是当时使用useSelector进行取值时，会提示reducer正在执行操作，跟其调度流程冲突导致了崩溃。其有2个必要条件，一个是使用connect去链接组件，一个是使用useSelector，相当于混用api状态。另外，他会有个顺序问题，也就是谁取更新了状态，产生的调度顺序问题。官网上说也可以不用selector，反正就是hooks取值绕过了context的更新。
• 后来，react-redux解决了崩溃，但是没有解决更新问题。可以看看这个例子：=/src/App.js 。可以发现，useSelector最后取值是1，但实际counter是3。
• 再后来，可以试试最新的包，同样的例子跑下来，useSelector取的值也变成3了。