在上一篇文章这里我们讲到，在render阶段的beginWork函数中，会将上次更新产生的 Fiber 节点与本次更新的 JSX 对象（对应ClassComponent的this.render方法返回值，或者FunctionComponent执行的返回值）进行比较。根据比较的结…

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

上一篇react-router原理之Link跳转中提到了Link在onClick的处理函数中会调用history的push(或replace)方法。接下来我们就以push方法为例来看一下history具体都做了些什么。Link中的history是通过context传入进来的，需…

本文的目的是讲清楚react-router如何根据浏览器中的url来渲染不同的组件的，至于url是如何改变的（Link组件）请参见下一篇react-router原理之Link跳转。 react-router提供了专门的路由匹配方法matchPath(位于packages/rea…

如果你在编写函数组件并意识到需要向其添加一些 state，以前的做法是必须将其它转化为 class。现在你可以直接在现有的函数组件中使用 Hooks 1. 类组件的不足 综上所述，如果不注意的话，很容易写成第三种写法，导致性能上有所损耗。 2. Hooks 优势 副作用的关注点…

使用React开发新项目时，遇见了刷新页面，直接访问二级或三级路由时，访问失败，出现404或资源加载异常的情况，本篇针对此问题进行分析并总结解决方案。 那么我们怎么处理才能正常访问，各页面路由呢？博主追踪溯源，查找文档配置后解决了问题，本篇就是对整个解决问题过程的总结。 在使用…

Fiber 是对 React 核心算法的重构，facebook 团队使用两年多的时间去重构 React 的核心算法，在React16 以上的版本中引入了 Fiber 架构，其中的设计思想是非常值得我们学习的。 我们知道，在浏览器中，页面是一帧一帧绘制出来的，渲染的帧率与设备的刷…

一 前言 先问大家几个问题，这几个问题都是我在面试中真实被问到的，属实给我整不会了.... 写hooks跟写类组件比，hooks有啥优势？ 我们如何封装一个hook？ hooks原理是什么？ 面试虽然