myprototypewhat's blog

前端题目 2： 背景：前端请求时，response 的时序无法完全确定。当使用 Input 做输入变化的 api 搜索时 当 input = a 时，发送请求 request，返回 responseA。此时改变 input，input = b，发送 请求 request ，返回 responseB。如果因为网络波动，responseB 先返回，responseA 后 返回，会导致最终渲染数据不对。 要求：实现 Input 组件，对上述异常情况做处理，使得渲染结果始终是当前 input 的内容 作业须提交：方案描述和涉及到的代码具体实现 基本代码 const debounce = (func,

Bailout 策略 是React内部优化的手段之一，提前命中bailout策略可以减少没必要的Re-render 之前被面试官问到了，也不知道有没有给她说清楚，重新梳理一下 命中条件 beginWork if ( // 如果新旧props不一致 oldProps !== newProps || // 因为全局变量disableLegacyContext，始终返回false hasLegacyContextChanged() ) { didReceiveUpdate = true; } else { // props没有改变。检查是否有挂起的update或contex

React@v19 前言 这章会详细讲解： * 渲染一个React应用都做了什么 * fiber 的部分属性 * 如何调度一个渲染任务 ReactDom 常见 React 应用写法 const root = ReactDOM.createRoot(document.getElementById("root")); root.render(); root.render为入口开启了React应用的渲染 createRoot export function createRoot( container: Element | Document | DocumentFr

阅读全文 »

React@v19 前言 这章会详细讲解： * 如何调度一个渲染任务 * 不包含Scheduler相关代码 scheduleUpdateOnFiber export function scheduleUpdateOnFiber( root: FiberRoot, fiber: Fiber, lane: Lane ) { if ( // 当前调度的更新在当前正在处理的根节点上 (root === workInProgressRoot && // 并且正在等待数据返回 workInProgressSuspendedReason ==

React-Scheduler version@0.20.1 前言 Scheduler顾名思义就是一个调度器，负责React中任务的调度。众所周知 JS 是单线程，通过task和micro task来调度任务的执行。 核心概念分为三个：时间切片、任务切片和优先级调度 * 时间切片：将时间按帧切分**(默认 5ms)**执行任务，以达到不阻塞浏览器渲染。当页面有某处更新或者交互的时候，用户无感知阻塞或卡顿。 * 任务切片：如果一个任务过长，在一帧内无法完成，将中断任务，在下一帧重新调用。 * 优先级调度：通过不同优先级来决定某些任务优先调度。 * 为了尽快的找到最高优先级的任务，使用

use use 是一个 React Hook，它可以让你读取类似于 Promise 或 context 的资源的值。 function use(usable: Usable): T { // 参数得是个对象 if (usable !== null && typeof usable === "object") { if (typeof usable.then === "function") { // promise对象或者类promise对象 const thenable: Thenable = (usable: any);

阅读全文 »

前言 看之前应该对 React 的完整渲染流程有一个清晰的认知，否则很容易迷茫。 Suspense 例子 // Test.js const promsie = new Promise((resolve) => { setTimeout(resolve, 1000, "state"); }); const Test = () => { const state = use(promsie); return ; }; // App.js function App() { return (

阅读全文 »

useContext 调用的是 readContext，mount 和 update 调用的一样 export function readContext(context: ReactContext): T { return readContextForConsumer(currentlyRenderingFiber, context); } createContext 先看下创建的过程 export function createContext(defaultValue: T): ReactContext { const context: ReactCon

阅读全文 »

babel 流程 编译转换输出parsertransformgenerator@babel/parser@babel/traverse@babel/generator将代码进行词法分析、语法分析后转换成 AST遍历 AST，对 AST 进行修改将 AST 转换成代码名词介绍 Plugins 在 Presets 前运行 plugins：插件 { "plugins": ["plugin1", "plugin2"], } 先执行plugin1后执行plugin2 Babel 推崇功能的单一性，就是每个插件的功能尽可能的单一。比如想使用 ES6 的箭头函数，需要插件@babel/plugin

useMemo 很简单，直接看源码 mountMemo / updateMemo function mountMemo( nextCreate: () => T, deps: Array | void | null ): T { // 创建hook对象 const hook = mountWorkInProgressHook(); const nextDeps = deps === undefined ? null : deps; const nextValue = nextCreate(); hook.memoizedState = [nex

阅读全文 »