无限滚动是一个开发时经常遇到的问题，比如 ant-design 的 List 组件里就推荐使用 react-infinite-scroller 配合 List 组件一起使用。 假如我们想自己实现无限滚动，难免要去查 scroll 事件，还要搞清 offsetHeight, sc…

前言：本文介绍了顶层API的使用，大多数情况，我们都是对市面上的封装的组件拿来即用，所以几乎用不到任何顶层API来写通用型的业务代码。但是往往都是这些顶层API的支持得以我们在用这些组件时候得心应手。

大家都知道React中的ref属性可以帮助我们获取子组件的实例或者Dom对象，进而对子组件进行修改，是一个很方便的特性。在传统类组件中，我们通过使用 React.createRef() 创建的，并通过 ref属性附加到 React 元素来使用。而随着hooks的越来越广泛的使用…

react18新特性 一、 Render API 三种入口模式 legacy 模式： ReactDOM.render(, rootNode)。没有开启新功能，这是react17采用的默认模式。 blo

虚拟列表可以说是一个很常见的需求场景了。 什么是虚拟列表？在我们日常生活中，刷不到底的新闻 Feed 流，无尽图片瀑布流、超级超级长的排行榜等等。对于这种场景，我们不可能一次性加载完所有数据，因为不仅用户手机的视窗大小决定了这种做法很浪费，同时请求如此多的数据，从网络带宽、服务…

不同类型业务要求的性能标准各不相同。如果对一个 ToB 的后台管理系统要求首屏速度以及 SEO，显然不合理也没必要。 第一要考虑的不是如何去优化，而是值不值得去优化，React 性能已经足够优秀，毕竟“过早优化是魔鬼”，情况总是“可以，但没必要”。 作为一个开发人员，深入了解工…

如果我们直接把整个列表渲染出来, 仅仅学生列表就会生成1000+个div标签. 这个时候的DOM数量就会变得难以想象. 我们都知道, DOM结构如果过大, 网页就会出现用户操作体验上的问题, 比如滚动, 点击等常用操作. 同时, 对react的虚拟DOM计算以及虚拟DOM反映到…

最近 React 18 发布后，部分改动对我们使用 React Hooks 有一些影响。这篇文章对官方的文档做了翻译，好让大家清晰的认识到这个改动的背景和影响。

很多使用现代 React 的前端开发者，时常遇到组件渲染两次的情况。这害得他们都快把自己薅秃了。 另外一些人注意到了这个行为，但是他们觉得这是 React 运行的原理。又有些人会在 React 官方 repository 上发起工单，把这当做一个 bug 上报。 所以开发者社区…