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

虽然说现在的你不会写出这样的代码，但以前肯定写过类似的。别说是同事，就算是自己过半个月回来也要熟悉一会亲手写的逻辑代码。 也称“业务型”编程，指的是用一步步下达命令最终去实现某个功能。行为过程不直观，只关心下一步应该怎么、然后再怎么、最后干什么，却对性能、易读性、复用性漠不关心…

1. 引言 如果你在使用 React 16，可以尝试 Function Component 风格，享受更大的灵活性。但在尝试之前，最好先阅读本文，对 Function Component 的思维模式有一个初步认识，防止因思维模式不同步造成的困扰。 2. 精读 也就是，一个返回了…

最简单的用 react hooks 实现国际化的 hooks。无任何其他依赖。 其中useLocalStorage复制了react-use中的代码，为了移除依赖。 下一步是用缓存提升性能。

1. 引言 2. 状态管理之 Redux 解决方案 3. 状态管理之 MobX 解决方案 4. 这个 example 长啥样 5. Classic React App with Redux 6. Classic React App with Mobx 7. React Hook…

《xx行代码带你实现迷你React》，《xx行代码实现React hook》这样短小精干的文章。如果你只是想花一点点时间了解下React的工作原理，我向你推荐 这篇文章，非常精彩。 《React Fiber原理》，《React expirationTime原理》这样摘录Reac…

对于较长的列表，比如1000个数组的数据结构，如果想要同时渲染这1000个数据，生成相应的1000个原生dom，我们知道原生的dom元素是很复杂的，如果长列表通过生成如此多的dom元素来实现，很可能使网页失去响应。 首先我们尝试在React项目中，未做任何优化一次性渲染1000…

对于即将来临的 React Hooks 特性，我听到最常见的问题都是关于测试的。我都能想像出你测试这种时的焦虑： 该 Enzyme 测试用例适用于一个存在真正实例的类组件 Accordion，但当组件为函数式时却并没有 instance 的概念。所以当你把有状态和生命周期的类组…

关于react hook我就不多介绍了。hook提供了抽象状态的能力，自然而然让人想到可以基于hook抽离全局状态。其天生自带轮子光环，所以社区也出现了不少基于hook的状态管理工具，比如说前阵子飞冰团队出的icestore，亦或者这个stamen，不过相对来说我更喜欢的还是这…