大家好，我卡颂。 5月30日刚好是React10周年纪念日。 我顺手拉了下React最新代码，这一看不要紧，居然已经有22个hook了。 其中： react包导出了21个 react-dom包导出了1

suspense的字面意思就是悬而不决，用在平时开发中，就可以理解为还没有完成的事，你不知道啥时候完成。也就是异步，异步加载组件，异步请求数据。 1. 代码拆分 服务于打包优化的代码拆分。lazy和suspense配合使用 这样在打包代码时，可以显著减少主包的体积，加快加载速度…

路由系统是 Umi 很重要的一个部分，常规用法中我们最常使用或者听到的就是所谓的“约定式”和“配置式”， 但其实这两者只是通过显式或者隐式的方式获取到“路由配置”，将他传给 react-router-

当请求比较多时，每次都要重复这样的操作。这里我们可以利用 react 提供的 hook，自己来封装一个useRequest。 umi 框架中已经有实现了一个 useRequest 方法，useRequest-umi-hook，他这里实现的功能很多，我们只实现一个基本的功能，其他…

需求：缓存页面状态，避免重复渲染。实现：从 umi 中导出 KeepAlive，包裹在需要被缓存的组件上。解决用法问题。

最近在开发业务项目的时候，产品小姐姐突然来到我身边，然后就对着电脑一顿操作，具体场景大致是这样的。 如上图所示，当在数万级别的数据中，选择一条，点击查看，跳转到当前数据的详情页，当点击按钮返回返回来，或者是浏览器前进后退等其他操作，返回到列表页的时候。要记录当前列表的位置。也就…

在某个月黑风高的晚上...没剧刷的我无意想起以前处理的一些弹窗的坑。 然后又无意间刷到“Portal”，才知道Modal的实现还有如此妙的方式，顺而想着干脆把UI组件库的实现原理看完。 1. Modal弹窗的基本原理 我给弹窗类的定义是脱离固定的层级关系，不再受制于层叠上下文的…

Recoil 的产生源于 Facebook 内部一个可视化数据分析相关的应用，在使用 React 的实现的过程中，因为现有状态管理工具不能很好的满足应用的需求，因此催生出了 Recoil 。 Redux 的啰嗦代码达到了其保证的维持可预测性的目标，但自然而然在灵活性方面就有所欠…

上面的写法使得组件之间耦合非常强，一旦组件结构需要发生变化，则需要大幅修改传递逻辑，灵活性和可维护性都十分低。此外，由于将 state 提升到了”全局“，那么当 state 改变后，所有的子组件，包括一些以前并没用到这些 state 的组件也要跟着 re-render，若子组件…