![](https://img-blog.csdnimg.cn/2de9391354ab4c74aa7aebeb305a283a.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
深入浅出搞定 React
文章平均质量分 95
这世界上没有一个前端不想学好React,如果有,那可能还没想明白
从人到猿
带薪摸鱼只是不亏,让老板为学习买单才是血赚
展开
-
JSX 代码是如何“摇身一变”成为 DOM 的?
时下虽然接入 JSX 语法的框架越来越多,但与之缘分最深的毫无疑问仍然是 React。2013 年,当 React带着 JSX横空出世时,社区曾对 JSX 有过不少的争议,但如今,越来越多的人面对 JSX都要说上一句“真香”!我们就来一起认识下这个“真香”的 JSX,聊一聊“JSX代码是如何‘摇身一变’成为 DOM的”。原创 2021-11-09 14:49:16 · 453 阅读 · 0 评论 -
为什么React16要更改组件的生命周期(上)
作为一个专业的 React开发者,我们必须要求自己在知其然的基础上,知其所以然。从“What to do”到“How to do”,再到“Why to do”。原创 2021-11-09 16:00:34 · 419 阅读 · 0 评论 -
为什么 React 16 要更改组件的生命周期?(下)
为什么 React 16 要更改组件的生命周期?(下)进化的生命周期方法:React 16 生命周期工作流详解 这里推荐一个React生命周期大图,点击查看,先来看 React 16.3 的大图: 这里之所以特意将版本号精确到了小数点后面一位,是因为在React 16.4之后,React生命周期在之前版本的基础上又经历了一次微调。 接下来,先把上面这张React 16.3 生命周期大图中所涉及的内容讲清楚,然后再对 16.4 的改动进行介绍。Mounting 阶段:组件的初始化渲染(挂载)原创 2021-11-10 10:43:54 · 697 阅读 · 0 评论 -
数据是如何在React组件之间流动的(上)
当我们谈论生命周期时,其实谈论的是组件的“内心世界”。但组件和人是一样的,它不仅需要拥有丰富的内心世界,还应该建立健全的“人际关系”,要学会沟通和表达。原创 2021-11-10 15:21:35 · 797 阅读 · 0 评论 -
数据是如何在 React 组件之间流动的?(下)
认识 React 天然具备的全局通信方式“Context API”,并对 Redux 的设计思想和编码形态进行初步的探索原创 2021-11-10 17:13:32 · 205 阅读 · 0 评论 -
React-Hooks 设计动机与工作模式(上)
提起 React-Hooks,可能很多人的第一反应,都会是 useState、useEffect、useContext这些琐碎且繁多的 API。似乎 React-Hooks 就是一坨没有感情的工具性代码,压根没有啥玄妙的东西在里面,那些面试官天天让咱聊 React-Hooks,到底是想听啥呢?原创 2021-11-11 13:39:52 · 659 阅读 · 0 评论 -
React-Hooks 设计动机与工作模式(下)
本篇通过一系列的编码实例来认识 useState、useEffect这两个有代表性的 Hook,在此基础上重新理解“Why React-Hooks”。原创 2021-11-11 14:57:04 · 209 阅读 · 0 评论 -
真正理解虚拟 DOM:React 选它,真的是为了性能吗?
研发模式不断演进的背后,恰恰蕴含着前端人对 “DOM 操作” 这一核心动作的持续思考和改进。而虚拟 DOM,正是先驱们在这个过程中孕育出的一颗明珠。原创 2021-11-12 13:54:29 · 1467 阅读 · 3 评论 -
React 中的“栈调和”(Stack Reconciler)过程是怎样的?
如果我们不清楚 React 15 的运作机制,就无从把握它的局限性;如果我们不能确切地把握 React 15 的局限性,就无法从根本上理解 React 16 大改版背后的设计动机。因此在追逐时代潮流之前,必须学好历史。原创 2021-11-12 15:25:42 · 1036 阅读 · 0 评论 -
setState 到底是同步的,还是异步的?
setState 到底是同步的,还是异步的? setState 对于许多的 React 开发者来说,像是一个“最熟悉的陌生人”:当你入门 React 的时候,接触的第一波 API 里一定有 setState——数据驱动视图,没它就没法创造变化;当你项目的数据流乱作一团的时候,层层排查到最后,始作俑者也往往是 setState——工作机制太复杂,文档又不说清楚,只能先“摸着石头过河”。 setState 的工作机制渐渐与 React 调和算法并驾齐驱,成了 React 核心原理中区分度最高的知原创 2021-11-15 14:54:45 · 1311 阅读 · 0 评论 -
如何理解 Fiber 架构的迭代动机与设计思想?
“快速响应”可以说是 React 团队在用户体验方面最为要紧的一个追求。正是出于对“快速响应”的执着,React 才会想方设法把原本 O(n3) 的 Diff 时间复杂度优化到了前无古人的 O(n)。原创 2021-11-15 17:38:43 · 680 阅读 · 0 评论 -
ReactDOM.render 是如何串联渲染链路的?(上)
以首次渲染为切入点,拆解 Fiber 架构下 ReactDOM.render 所触发的渲染链路,结合源码理解整个链路中所涉及的初始化、render 和 commit 等过程。原创 2021-11-16 18:00:33 · 204 阅读 · 1 评论 -
ReactDOM.render 是如何串联渲染链路的?(中)
render 阶段可以认为是整个渲染链路中最为核心的一环,因为反复强调“找不同”的过程,恰恰就是在这个阶段发生的。render阶段做的事情有很多,以 beginWork 为线索,着重探讨 Fiber树的构建过程。原创 2021-11-17 14:17:45 · 186 阅读 · 0 评论 -
ReactDOM.render 是如何串联渲染链路的?(下)
以 completeWork为线索,去寻觅 Fiber树和 DOM 树之间的关联,将整个 render阶段理解透彻。在此基础上,结合 commit 阶段工作流,对 ReactDOM.render 所触发的渲染链路有一个完整、通透的理解。原创 2021-11-17 17:17:11 · 491 阅读 · 0 评论 -
剖析 Fiber 架构下 Concurrent 模式的实现原理
认识 Fiber 架构最迷人的那一面——Concurrent 模式(异步渲染)下的“时间切片”和“优先级”实现。原创 2021-11-18 14:12:24 · 629 阅读 · 0 评论 -
特别的事件系统:React 事件与 DOM 事件有何不同?
无论是在面试场景下,还是在实际的开发中,React 事件相关的问题都更倾向于考验我们对事件工作流、事件特征等逻辑层面问题的理解,而非对源码细节的把握。原创 2021-11-18 16:38:14 · 615 阅读 · 0 评论 -
Redux设计思想与工作原理(上)
学习 Redux 的架构思想,梳理“单向数据流”这一核心特征的来龙去脉,真正理解Redux 定义中“可预测”这 3 个字背后的深意。原创 2021-11-22 16:59:58 · 670 阅读 · 0 评论 -
Redux 设计思想与工作原理(下)
针对 dispatch和 subscribe这两个具体的方法进行分析,分别认识 Redux工作流中最为核心的dispatch动作,以及 Redux自身独特的 “发布-订阅”模式。原创 2021-11-30 13:55:55 · 492 阅读 · 0 评论 -
从 Redux 中间件实现原理切入,理解“面向切面编程”
结合 Redux应用实例与 applyMiddleware源码,对 Redux中间件的实现原理进行分析。在此基础上,对“面向切面”这一经典的编程思想建立初步的认识。原创 2021-11-30 17:27:43 · 796 阅读 · 0 评论 -
从 React-Router 切入,系统学习前端路由解决方案
React-Router 是 React 场景下的路由解决方案,本篇将学习 React-Router 的实现机制,并基于此提取和探讨通用的前端路由解决方案。原创 2021-12-01 13:50:00 · 801 阅读 · 0 评论 -
思路拓展:如何打造高性能的 React 应用?
eact 应用也是前端应用,如果之前你知道一些前端项目普适的性能优化手段,比如资源加载过程中的优化、减少重绘与回流、服务端渲染、启用 CDN 等,那么这些手段对于 React 来说也是同样奏效的。原创 2021-12-01 15:34:34 · 734 阅读 · 0 评论 -
跟 React 学设计模式:掌握编程“套路”,打造高质量应用
与性能优化的视角相似,当我们谈论 React 设计模式时,实际上是在谈论“React 组件的设计模式”。原创 2021-12-02 13:34:03 · 458 阅读 · 0 评论