基于 React 18 版本讲解 React Hooks 原理。配合录制的 debug 视频，带大家详细理解 Hooks 在 Fiber 中的运行机制、状态保存逻辑和常见的关于 Hook 的问题。

在阅读文章之前，让我们先明白几个概念。 SPA（Single Page Application）： 单页面应用程序，是前后端分离时提出的一种解决方案。在一个应用或者站点中，只有一个完整的html页面，这个页面有一个容器root节点，可以把需要加载的代码片段插入到该容器中。 SP…

React Router v4 是一个完全使用 React 重写的流行的 React 包，之前版本的 React Router 版本配置是使用伪组件也很晦涩难懂。现在 v4 版本的 React Router，所有的东西都 “仅仅是组件”。 选择 router。 创建 route…

我的部分工作职责是执行所谓的“技术面试”，在面试时我会评估申请“React 前端开发”职位的潜在候选人。 如果你曾经用谷歌搜索“React 面试问题”（或任何其他“[技术]面试问题”），你可能已经看过无数“十大 React 面试问题”，这些问题要么已经过时，要么和“state …

这四次输出，按常理来说分别是: 1，2，3，4。但是，实际输出为: 0, 0, 2, 3。 在分析之前，需要知道setState的一些关键点。 多次setState函数调用产生的效果会合并。 上面两块代码的效果是一样的。如果每次调用都引发一次生命周期更新，那性能就会消耗很大了。…

React 把组件看作状态机(有限状态机), 使用state来控制本地状态, 使用props来传递状态. 前面我们探讨了 React 如何映射状态到 UI 上(初始渲染), 那么接下来我们谈谈 React 时如何同步状态到 UI 上的, 也就是: 这篇文章会为你解答这些问题. …

最近准备培训新人, 为了方便新人较快入手 React 开发并编写高质量的组件代码, 我根据自己的实践经验对React 组件设计的相关实践和规范整理了一些文档, 将部分章节分享了出来. 由于经验有限, 文章可能会有某些错误, 希望大家指出, 互相交流. 由于篇幅太长, 所以拆分为…

Context被翻译为上下文，在编程领域，这是一个经常会接触到的概念，React中也有。 在React的官方文档中，Context被归类为高级部分(Advanced)，属于React的高级API，但官方并不建议在稳定版的App中使用Context。 不过，这并非意味着我们不需要…