React中，会遍历EffectList来执行节点操作、生命周期方法、Effect方法，可以把EffectList比作圣诞树上挂的彩灯，而这颗圣诞树就是Fiber树。 为什么会存在EffectList呢？打个比方来说，一颗Fiber树中有一些Fiber节点需要执行compone…

这次的分享结合我在项目中使用 full hooks-based React Components 的一些经验，给大家介绍一些我所认为的 React Hooks 最佳实践。 首先还是简单回顾一下 React Hooks。 先看传统的 React Class-based Compo…

自从react16.8，react-hooks诞生以来，在工作中一直使用hooks，一年多的时间里，接触的react项目，渐渐使用function无状态组件代替了classs声明的有状态组件，期间也总结了一些心得。尤其对于近期三个月的项目里，一点点用自定义hooks来处理公司项…

随着React和Vue等异步框架的广泛运用，前端状态管理器逐渐成为前端开发比不可少话题。形如React有倍受欢迎的Redux，再如Vue标配的状态管理器Vuex，都是业内相对成熟的状态管理器，那么我们接下来就用原生javascript来实现一个状态管理器。 主要包含两个方面：第…

本文通过对React事件系统和源码进行浅析，回答“为什么React需要自己实现一套事件系统？”和“React的事件系统是怎么运作起来的？”两个问题。React为了性能和复用，采用了事件代理，池，批量更新，跨浏览器和跨平台兼容等思想，将事件监听挂载在document上，构造合成事…

最近一直在做H5公众号的需求，使用的技术栈如标题，从立项目到稳定增长阶段，前端使用React随着业务需求从0到1把项目搭建起来，get了很多React+H5+微信场景下的知识点，把最近的实践总结下，有需要使用React上手微信H5的可以参考，大家一起交流哈😀。 React+H…

上一篇文章我们分析了Redux-Thunk的源码，可以看到他的代码非常简单，只是让dispatch可以处理函数类型的action，其作者也承认对于复杂场景，Redux-Thunk并不适用，还推荐了Redux-Saga来处理复杂副作用。本文要讲的就是Redux-Saga，这个也是…

重构过程中，肯定会遇到新的代码如何做技术选型的问题，要考虑到这套技术的生命力，也就是他是否是更新的技术，还有他的灵活和拓展性，期望能够达到在未来至少 3 年内不需要做大的技术栈升级。我的这次重构经历是把 jQuery 的代码变为 React ，你品品，算是最难，劳动最密集的重构…

前面的文章分析了 Concurrent 模式下异步更新的逻辑，以及 Fiber 架构是如何进行时间分片的，更新过程中的很多内容都省略了，评论区也收到了一些同学对更新过程的疑惑，今天的文章就来讲解下 React Fiber 架构的更新机制。 可以注意到 Fiber 节点有个 al…