![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
React学习笔记
文章平均质量分 93
万邺
如果有梦,那一定是蓝色
展开
-
React:设计模式
与性能优化的视角相似,当我们谈论 React 设计模式时,实际上是在谈论“React 组件的设计模式”。在 React 设计模式中,最重要、也是最为大家所津津乐道的几个模式分别是:高阶组件(Higher Order Components)在概念上沿袭了高阶函数(Higher-Order Function)。这里再复习一下高阶函数的概念:接收函数作为输入,或者输出另一个函数的一类函数,就是高阶函数。 相应的,高阶组件指的就是参数为组件,返回值为新组件的函数。没错,高阶组件本质上是一个函数。下面是一个简单的高原创 2022-06-09 20:49:39 · 1537 阅读 · 0 评论 -
React:性能调优思路
React 应用也是前端应用,如果之前你知道一些前端项目普适的性能优化手段,比如资源加载过程中的优化、减少重绘与回流、服务端渲染、启用 CDN 等,那么这些手段对于 React 来说也是同样奏效的。 不过对于 React 项目来说,它有一个区别于传统前端项目的重要特点,就是以 React 组件的形式来组织逻辑:组件允许我们将 UI 拆分为独立可复用的代码片段,并对每个片段进行独立构思。因此,除了前面所提到的普适的前端性能优化手段之外,React 还有一些充满了自身特色的性能优化思路,这些思路基本都围绕“组原创 2022-06-09 17:54:18 · 198 阅读 · 0 评论 -
React:Redux中间件
结合 应用实例与 源码,对 中间件的实现原理进行分析。在此基础上,对“面向切面”这一经典的编程思想建立初步的认识。 在之前介绍 函数时,已经简单地提过中间件——中间件相关的信息将作为 函数的一个 类型的入参被传入。这里简单复习一下 的调用规则,示例代码如下: 可以看到,对外暴露了 这个方法。接受任意个中间件作为入参,而它的返回值将会作为参数传入 ,这就是中间件的引入过程。中间件的引入,会为 工作流带来什么样的改变呢?这里以 为例,从经典的“异步 Action”场景切入,一起看看中间件原创 2022-06-08 23:19:19 · 597 阅读 · 0 评论 -
React:Redux 设计思想
Redux 的设计在很大程度上受益于 Flux 架构,可以认为 Redux 是 Flux 的一种实现形式(虽然它并不严格遵循 Flux 的设定),理解 Flux 将帮助更好地从抽象层面把握 Redux。 Flux 并不是一个具体的框架,它是一套由 Facebook 技术团队提出的应用架构,这套架构约束的是应用处理数据的模式。在 Flux 架构中,一个应用将被拆分为以下 4 个部分。 这 4 个部分之间的协作将通过下图所示的工作流规则来完成配合:一个典型的 Flux 工作流是这样的:用户与 之间产生交互,通原创 2022-06-07 17:37:37 · 239 阅读 · 0 评论 -
React:组件间数据流动(下)
上篇文章中,讲述了 React 数据流方案中风格相对“朴素”的 Props 单向数据流方案,以及通用性较强的“发布-订阅”模式。本篇文章中将认识 React 天然具备的全局通信方式“Context API”,并对 Redux 的设计思想和编码形态进行初步的探索。使用 Context API 维护全局状态 Context API 是 React 官方提供的一种组件树全局通信的方式。在 React 16.3 之前,Context API 由于存在种种局限性,并不被 React 官方提倡使用,开发者更多的是把原创 2022-06-06 23:38:32 · 792 阅读 · 0 评论 -
React:组件间数据流动(上)
当我们谈论生命周期时,其实谈论的是组件的“内心世界”。但组件和人是一样的,它不仅需要拥有丰富的内心世界,还应该建立健全的“人际关系”,要学会沟通和表达。 下面将一起探索蕴含在 React 组件中的“沟通与表达”的艺术。我们知道,React 的核心特征是“数据驱动视图”,这个特征在业内有一个非常有名的函数式来表达: 上面表达式的含义反应了一个结论:React 的视图会随着数据的变化而变化。数据这个角色在 React 中的地位可见一斑。 在 React 中,如果说两个组件之间希望能够产生“耦合”(即 A原创 2022-06-06 23:02:07 · 206 阅读 · 0 评论 -
React:Fiber设计思想
React 团队在“React 哲学”中对 React 的定位: “快速响应”可以说是 React 团队在用户体验方面最为要紧的一个追求。正是出于对“快速响应”的执着,React 才会想方设法把原本 O(n3) 的 Diff 时间复杂度优化到了前无古人的 O(n)。 随着时间的推移和业务复杂度的提升,React 曾经被人们津津乐道的 Stack Reconciler 也渐渐在体验方面显出疲态。为了更进一步贯彻“快速响应”的原则,React 团队“壮士断腕”,在 16.x 版本中将其最为核心的 Diff原创 2022-06-06 12:56:48 · 203 阅读 · 0 评论 -
React:setState同步or异步?
‘最熟悉的陌生人’当你入门React的时候,接触的第一波API里一定有setState-----数据驱动视图。当你项目的数据流乱作一团的时候,始作俑者也往往是setState----工作机制太复杂,文档又不说清楚。setState 的工作机制渐渐与 React 调和算法并驾齐驱,成了 React 核心原理中区分度最高的知识模块之一。“神奇时刻”到底何时发生?state到底是在哪个环节发生了变化呢?所谓的“恰恰好”又如何界定呢?关于setState的问题,由下面一段代码说起:给出一个这样的 App 组原创 2022-06-06 00:21:36 · 619 阅读 · 0 评论 -
React:栈调和(Reconciliation)
“调和”和“Diff”“调和”又译为“协调”Virtual DOM是一种编程概念。在这个概念里,UI以一种理想化的,或者说“虚拟的”表现形式被保存于内存中,并通过如ReactDOM等类库使之与“真实的”DOM同步。这一过程叫作协调(调和)。调和过程并不能和Diff划等号,调和是“使一-致”的过程,Diff是“找不同”的过程。Reconciler (调和器)的源码位于src/renderers/shared/stack/reconciler这个路径调和器所做的工作包括组件的挂载、卸载、更新等过程。如今大原创 2022-06-05 22:09:12 · 261 阅读 · 0 评论 -
React:真正理解虚拟DOM
在mvvm这个框架领域,到现在仍然存在一个及其热门的面试问题:为什么要使用虚拟DOM?一般的回答如下:本文将通过另一个视角,给出不同的答案,本文不局限于点对点看待问题本硕本身,而是放在一个足够长的、合理的上下文中进行讨论。在 React 中,render 执行的结果得到的并不是真正的 DOM 节点,结果仅仅是轻量级的JavaScript 对象,我们称之为 virtual DOM。虚拟DOM本质上是JS和DOM之间的映射缓存,在形态上是一个能够描述DOM结构的JS对象。虚拟 DOM 是 React 的一大亮点原创 2022-06-05 18:31:42 · 455 阅读 · 0 评论 -
React16:Hooks总览
React官网和2018年的React conf上都提到了动机这个东西,那么出现hooks的动机是什么?是什么推动了hooks的出现?先来看一下Hooks的动机。1.在组件间复用状态逻辑很难React没有提供可复用性行为“附加”到组件的途径,在写类组件的时候,一个类是一个闭包并且state在组件间传递并不怎么友好,虽然可以使用props和高阶组件来解决,但是这样会组件的结构更麻烦。如果你在 React DevTools 中观察过 React 应用,你会发现由 providers,consumers,高阶组件原创 2022-06-01 23:04:38 · 456 阅读 · 1 评论