首页
首页
AI Coding
NEW
沸点
课程
直播
活动
AI刷题
APP
插件
搜索历史
清空
创作者中心
写文章
发沸点
写笔记
写代码
草稿箱
创作灵感
查看更多
会员
登录
注册
深入浅出的学习react
啊丫丫
创建于2023-02-17
订阅专栏
react学习笔记
等 4 人订阅
共25篇文章
创建于2023-02-17
订阅专栏
默认顺序
默认顺序
最早发布
最新发布
React[学习笔记1]--开篇
技术圈时下盛行“造名词”风气,但其实这是故弄玄虚的“语言壁垒”——其实技术本身在多数情况下都是一些简单且有趣的东西,人们越是试图神化它,越容易脱离技术本质。 在过去的几年,“变化”始终是前端框架世界里的一号关键词:前有 jQuery 刚刚式微(衰落)时各路神仙各显神通,后有 R…
react[学习笔记2]--JSX
时下虽然接入 JSX 语法的框架越来越多,但与之缘分最深的毫无疑问仍然是 React。2013 年,当 React 带着 JSX 横空出世时,社区曾对 JSX 有过不少的争议,但如今,越来越多的人面对 JSX 都要说上一句“真香”!那么JSX 代码究竟是如何‘摇身一变’成为 D…
react[学习笔记3]--生命周期(上)
React 生命周期已经是一个老生常谈的话题了,然而,大多数的入门教材在设计上往往追求的是“简单省事、迅速上手”,这就导致许多人对于生命周期知识的刻板印象为“背就完了、别想太多”。当然“背就完事儿”这样简单粗暴的学习方式,或许可以帮助你理解“What to do”,到达“How…
react[学习笔记4]--生命周期(下)
在对 React 15 的生命周期有了系统的掌握和理解的基础上,我们接着对 React 16 以来的生命周期进行剖析。通过对比新旧两个版本生命周期之间的差异,来探寻变化背后的原因。 关于 React 16 以来的生命周期,下图是目前公认的比较优秀的流程大图。我们先来看 Reac…
react[学习笔记5]--props、发布订阅模式
当谈及生命周期时,其实谈论的是组件的“内心世界”。但组件和人是一样的,它不仅需要拥有丰富的内心世界,还应该建立健全的“人际关系”,要学会沟通和表达。 接下来所要探索的是蕴含在 React 组件中的“沟通与表达”的艺术。我们知道,React 的核心特征是“数据驱动视图”,这个特征…
react[学习笔记6]--数据流动之context与redux
在本章节中将来学习React 天然具备的全局通信方式“Context API”,并对 Redux 的设计思想和编码形态进行初步的探索。 Context API 是 React 官方提供的一种组件树全局通信的方式。 在 React 16.3 之前,Context API 由于存在…
react[学习笔记7]--react-hooks(上)
许多人对于React-Hooks这块的知识缺乏自信,至少在面试场景下,当聊到 React-Hooks 的时候,很少人能够像聊 Diff 算法、Fiber 架构一样滔滔不绝、言之有物。那么问题出在哪里呢?大概是在学习的方法和途径上。 提起 React-Hooks,可能很多人的第一…
react[学习笔记8]--react-hooks(下)
在之前的文章学习中,我们探究了 React-Hooks 的来头,并理解了其背后的“设计动机”。接下来我们来构建对 React-Hooks 的整体认知。 在章节的主体部分,将会通过一系列的编码实例来帮助你认识 useState、useEffect 这两个有代表性的 Hook,这一…
react[学习笔记9]--react hooks原理
不要在循环、条件或嵌套函数中调用 Hook。 原则 1 无须多言,React-Hooks 本身就是 React 组件的“钩子”,在普通函数里引入意义不大。而对于原则2,相信很多人在它身上栽过跟头,或者说至今仍然对它半信半疑。其实,原则 2 中强调的所有“不要”,都是在指向同一个…
react[学习笔记10]--虚拟DOM
在过去的十年里,前端技术日新月异 。从最早的纯静态页面,到 jQuery 一统江湖,再到近几年大火的 MVVM 框架——研发模式升级这件事情对于前端来说,好像成了某种常态。其实研发模式不断演进的背后,恰恰蕴含着前端人对 “DOM 操作” 这一核心动作的持续思考和改进。而虚拟 D…
react[学习笔记11]--栈调和
时下 React 16 乃至 React 17 都是业界公认的“当红炸子鸡”,相比之下 React 15 似乎已经是一副黯淡无光垂垂老矣的囧相了。 在这样的时代背景下,愿意自动自发地了解 React 15 的人越来越少,这是一个令人心碎的现象。毕竟有位伟人曾经说过,“以史为镜,…
react[学习笔记12]--setState同步or异步?
当项目的数据流乱作一团的时候,层层排查到最后,会发现始作俑者往往是 setState——工作机制太复杂,文档又不说清楚,只能先“摸着石头过河”。 久而久之,setState 的工作机制渐渐与 React 调和算法并驾齐驱,成了 React 核心原理中区分度最高的知识模块之一。接…
react[学习笔记13]--react与Fiber架构
我们认为,React 是用 JavaScript 构建快速响应的大型 Web 应用程序的首选方式。它在 Facebook 和 Instagram 上表现优秀。 这段话里有 4 个字值得细细品味,那就是“快速响应”,这 4 个字可以说是 React 团队在用户体验方面最为要紧的一…
react[学习笔记14]--ReactDom.render(上)
由于 ReactDOM.render 的内容比较多,所以拆分为上中下三部分来讲解。 在上一章节,我们站在宏观角度对 Fiber 的架构分层和迭代动机有了充分的把握。从本章节开始,将以首次渲染为切入点,拆解 Fiber 架构下 ReactDOM.render 所触发的渲染链路,结…
react[学习笔记15]--ReactDOM.render(中)
上一章节对 ReactDOM.render 的调用链路、包括其对应的初始化阶段的工作内容都有了学习和掌握。接下来在此基础上,学习后续的 render 阶段和 commit 阶段。这其中,render 阶段可以认为是整个渲染链路中最为核心的一环,我们反复强调“找不同”的过程,恰恰…
react[学习笔记16]--ReactDOM.render(下)
在上一讲从 beginWork 切入,摸索出了 Fiber 节点的创建链路与 Fiber 树的构建链路。本讲将以 completeWork 为线索,去寻觅 Fiber 树和 DOM 树之间的关联,将整个 render 阶段讲透。在此基础上,结合 commit 阶段工作流将会对 …
react[学习笔记17]--Fiber的concurrent模式
关于 Fiber 架构的实现原理和编码形态,前面已经洋洋洒洒地分析了 3 讲 。在前面的 3 讲里,通过对整个 ReactDOM.render 所触发的渲染链路进行了分析和串联,由此把 Fiber 架构在实现层面的大部分要点都捋了一遍。之所以花这么大篇幅,一方面是因为这部分知识…
react[学习笔记18]--react事件与DOM事件
相信不少人在进阶 React 的过程中都会或多或少地了解到这样一件事情:React 有着自成一派的事件系统,它和DOM 原生事件系统不一样。但具体不一样在哪,却很少有人能够一五一十地说清楚。 我们知道,对于不同的知识,需要采取不同的学习策略。就 React 事件系统来说,它涉及…
react[学习笔记19]--redux深入学习(上)
已经有过铺垫。从本讲开始,将在此基础上针对 Redux 进行更加系统和深入的学习。 可以快速上手。 何谓“系统”的学习?系统的一个前提就是建立必要的学习上下文,尝试理解事情的来龙去脉。 这些年常常会见到这样一种情况:很多人对 Redux 的基本操作很熟悉,甚至对它的运作机制也有…
react[学习笔记20]--redux深入学习(下)
在上一讲尝试对 Redux 源码进行拆解,认识了 Redux 源码的基本构成与主要模块,并深入了解了 createStore 这个核心模块的工作逻辑。这一讲将更进一步,针对 dispatch 和 subscribe 这两个具体的方法进行分析,分别认识 Redux 工作流中最为核…
下一页