1.面试官:react中的手写手写setState是同步的还是异步的
2.探索React异步解决方案之redux-saga
3.带你揭开神秘的 javascript AST 面纱之AST 基础与功能
4.react源码解析8.render阶段
面试官:react中的setState是同步的还是异步的
在面试过程中，经常会遇到关于React中setState操作同步或异步的签名问题。下面通过几个例子来解答这个问题：
例子1：点击按钮触发更新，手写手写在handle函数中调用两次setState。签名
例子2：在setTimeout回调中执行例子1的手写手写两次setState操作。
例子3：使用unstable_batchedUpdates在setTimeout回调中执行，签名instantbird 源码编译unstable_batchedUpdates的手写手写回调函数中调用两次setState。
例子4：两次setState在setTimeout回调中执行，签名但使用concurrent模式启动，手写手写即通过调用ReactDOM.unstable_createRoot启动应用。签名
简单来说，手写手写在同一个上下文中触发多次更新，签名这些更新会被合并为一次更新，手写手写例如在之前的签名React版本中，如果脱离当前的手写手写上下文，则不会被合并。原因是，处于同一个上下文中的多次setState操作的executionContext都会包含BatchedContext，包含BatchedContext的setState操作会合并。当executionContext等于NoContext时，就会同步执行SyncCallbackQueue中的任务，因此setTimeout中的多次setState操作不会合并，且会同步执行。
在Concurrent mode下，上面的连接ssr源码例子也会合并为一次更新，原因在于简化源码中，多次setState操作会比较这些操作的优先级，如果优先级一致，则会先返回，不会进行后面的渲染阶段。
总结：
在legacy模式下：命中batchedUpdates时是异步，未命中batchedUpdates时是同步的。
在concurrent模式下：都是异步的。
如需高效学习，可观看视频讲解，了解往期React源码解析文章，涵盖React设计、源码架构、核心API、legacy与concurrent模式、Fiber架构、渲染阶段、diff算法、commit阶段、生命周期、状态更新流程、hooks源码、手写hooks、scheduler与Lane、源码建站平台concurrent模式、context、事件系统、手写迷你版React等详细内容。
探索React异步解决方案之redux-saga
redux-saga是什么？ Redux-saga是一个用于简化Redux应用程序中异步操作的库，目标是更优雅地管理副作用、提高执行效率、方便测试并在处理错误时提供更好的支持。它的设计基于康奈尔大学的研究，旨在解决分布式系统中长时运行事务的数据一致性问题。 什么是SideEffects？ 在编程中，副作用指的是程序与外部世界（如用户、文件系统、网络上的其他计算机）进行交互的方式。在JavaScript中，这通常包括异步网络请求和浏览器缓存的读取等。 如何区别saga与thunk？ 尽管都作为Redux的中间件，saga和thunk在实现上和设计理念上存在差异。saga通过命令/回答模式进行通信，每个saga都是生成器函数，以同步的方式处理异步逻辑。而thunk则通过将函数作为action传递给store，支持异步操作。 学习saga使用 saga提供了两个主要的开封麻将源码中间件API，用于创建和运行saga。在安装依赖并关联store后，可以利用这些API来实现saga的运行。 saga中的关键概念 1. Task: 是saga运行的结果，提供执行和控制的接口。2. Channel: 用于在saga间传递消息，消息在被接收者请求前被缓存。
3. Buffer: 实现了消息的缓存策略。
4. SagaMonitor: 用于启动和监控saga事件。
saga的Effect创建器 Effect是包含执行指令的对象，用于指导saga中间件执行特定任务。例如，take用于监听特定action，put用于在store中发起action，call用于调用外部函数等。 saga的辅助函数和组合器 提供了一组函数来简化saga的编写，如TakeEvery、TakeLatest等，用于根据action模式生成saga。 Redux-Saga的测试 得益于saga的细粒度和低耦合性，使其在单元测试中表现出色。例如，可以测试特定的saga响应特定的action。 Redux-Saga使用技巧 1. 重试Ajax请求：在请求失败后自动重试。印刷wp源码2. 撤销操作：确保在操作撤销时可以回滚到原始状态。
参考资料Redux-Saga 漫谈
Saga Pattern
Redux-Saga官方文档
Why saga
手写Redux-Saga源码
带你揭开神秘的 javascript AST 面纱之AST 基础与功能
在前端开发中，AST（抽象语法树）是一个关键概念，几乎所有框架都是基于AST进行改造和运行。理解AST的基础与功能对于开发者至关重要。以下内容将带你深入了解AST，并探讨其在代码编译、跨端运行及代码改造中的应用。
AST基础与功能
AST是前端开发中不可或缺的元素，几乎所有框架如React、Vue、Taro等，都依赖于AST进行代码优化和执行。多端应用的开发离不开对AST概念的掌握。
通过手写简单的编译器，我们可以将JavaScript代码编译为浏览器能够识别的格式。实现自定义编译器后，开发者能够设计新的框架，最终目标是将编译后的代码转换为浏览器可执行的JavaScript、CSS和HTML。
翻译过程是关键，将原始代码转换为浏览器能够执行的代码。这一过程不仅可以实现代码的跨平台运行，还能创建新的框架。个人开发者可以通过团队合作，解决各种问题，实现跨端框架的开发。
分析器
在深入讨论AST之前，我们需要了解分析器的概念，它是编译原理的核心。分析器负责解析代码，识别关键词、符号等元素。词法分析器（Lexical analyzer）通过扫描代码，将其转换为有意义的序列（Tokens），为后续语法分析做准备。
语法分析器（Syntactic analyzer）则负责解析这些Token，构建代码的结构，如语法分析树或抽象语法树（AST）。这一步骤对于理解代码逻辑至关重要。
以JavaScript为例，通过分析器处理后的代码转换为AST，使得机器能够理解并执行。
抽象语法树（AST）
AST是代码解析的核心结果，它将源代码结构化为树状表示形式。在语言领域，AST可以视为语法分析树，它直观地展示了代码的结构和逻辑。
例如，分析“我写文章”这句话时，AST会将其分解为主语、谓语、宾语等元素，帮助理解和解析。
在JavaScript中，AST提供了代码原子化的表示，便于机器理解。通过AST，我们可以清晰地看到变量声明、函数定义等元素的结构，使代码解析过程更加直观。
AST的应用与用途
1. **自定义语法分析器**：开发者可以基于现有AST，设计自定义语法分析器，将特定语言转换为JavaScript，进而生成DOM节点、函数等。
2. **跨端运行**：利用AST实现代码翻译，支持在多种平台上运行。例如，Taro和uni-app等框架能将代码自动适配到H5、小程序等环境。
3. **代码改造与预编译**：通过分析AST，实现代码混淆、模块化、自动引入、版本兼容等增强处理，提高代码质量。
AST的应用实践
在框架改造与适配中，理解和使用AST至关重要。通过分析代码结构，开发者可以实现高效代码替换、配置读取与修改、文件重写等操作。掌握这些方法后，开发者能够更灵活地进行代码改造，提高开发效率与代码质量。
react源码解析8.render阶段
本文深入解析React源码中的渲染阶段，带你掌握React高效学习的精髓。让我们一起探索React的源代码，从基础到进阶，实现深入理解。
1. 开篇介绍和面试题
从最基础开始，解读面试题背后的原理，为你的学习之旅铺垫。
2. React设计理念
了解React的核心理念，为何它在现代前端开发中独树一帜。
3. React源码架构
拆解React源码结构，理解其设计的精妙之处。
4. 源码目录结构与调试
掌握React源码的目录布局和调试技巧，提升代码阅读效率。
5. JSX与核心API
深入学习JSX语法与React核心API，构建高效、灵活的组件。
6. Legacy与Concurrent模式入口函数
比较Legacy和Concurrent模式，了解React性能优化之道。
7. Fiber架构
揭秘Fiber的运作机制，理解React渲染的高效实现。
8. Render阶段
重点解析Render阶段的核心工作，构建Fiber树与生成effectList。
9. Diff算法
深入了解React的Diff算法，高效计算组件更新。
. Commit阶段
探索Commit阶段的流程，将Fiber树转换为真实DOM。
. 生命周期
掌握React组件的生命周期，优化组件性能。
. 状态更新流程
分析状态更新的机制，实现组件响应式的开发。
. Hooks源码
深入Hooks源码，理解状态管理与函数组件的结合。
. 手写Hooks
实践动手编写Hooks，巩固理解。
. Scheduler与Lane
探讨React的调度机制与Lane概念，优化渲染性能。
. Concurrent模式
探索Concurrent模式下的React渲染流程，提高应用的交互流畅度。
. Context
学习Context的用法，简化组件间的数据传递。
. 事件系统
深入事件处理机制，实现组件间的交互。
. 手写迷你版React
实践构建一个简单的React框架，深化理解。
. 总结与面试题解答
回顾学习要点，解答面试常见问题，为面试做好充分准备。
. Demo
通过实际案例，直观展示React渲染流程与技巧。
本课程带你全面掌握React渲染阶段的关键知识与实战技能，从理论到实践，提升你的前端开发能力。
