Rocen's Blog

摘要： webpack-dev-server启动本地服务 根据webpack-dev-server的package.json中的bin命令，可以找到命令的入口文件bin/webpack-dev-server.js。 webpack-dev-server 会启动 webpack 创建 compiler 实例， 阅读全文

摘要： webpack 可以分为 4 个阶段： 初始化阶段 - webpack 合并配置项 创建Compiler 注册插件 编译阶段 - build 读取入口文件 从入口文件开始编译 调用 loader 对源代码进行转换 借助 babel 解析为 AST 收集依赖模块 递归对依赖模块进行编译操作 生成阶段 阅读全文

摘要： Scheduler 的目的 React 实现 Scheuler 的目的是想要实现时间切片。 时间切片是指：将长任务拆分成多段，每次执行一小段的任务的操作。 Scheduler 的实现 React 利用 MessageChannel 创建出一个 port 实例，port 实例有两个属性 port1 和 阅读全文

摘要： Error Boundary的定义 Error Boundary是一种组件，或者说是类组件。它需要定义 getDerivedStateFromError 或者 componentDidCatch 生命周期方法。 它自身有三种功能： 捕获渲染期间的错误 打印这些错误 降级展示UI Error Boun 阅读全文

摘要： 新增/插入 对于需要新增/插入的节点， React 会对 workInProgress fiber.flags 执行按位或 Placement 的操作。表示该 fiber 节点需要执行插入的操作。 执行插入的主要方法是 commitPlacement 。在该方法中会根据当前 Fiber 节点是否存在 阅读全文

摘要： useState useState 的工作流程可以分为两步： 声明阶段：在组件渲染时执行 useState 方法 调用阶段：触发点击事件时，执行 dispatch（通过 useState 返回的数组的第二个参数） 调用阶段 首先通过点击事件会执行 dispatch 方法。在 React 源码当中 d 阅读全文

摘要： 用法 React.memo是一个高阶函数，可以传入两个参数，并返回一个新组件。第一个参数是一个组件（可以是任何有效的 React 组件，包括函数组件、类组件和 forwardRef 包裹的组件），第二个参数是比较函数。这个比较函数默认会对前后 props 进行浅比较，如果前后 props 相等则不会 阅读全文

摘要： React Diff流程 前提 在React的render阶段的beginWorl方法中对于update的组件会通过reconcileChildFibers方法将当前组件与该组件在上次更新时对应的Fiber节点进行比较（即diff算法），将比较的结果生成新的Fiber节点，即创建workInProg 阅读全文

摘要： useEffect 完整的执行过程 创建 effect 和保存 effect 首先在 render 阶段的 beginWork 方法中根据 workInProgress.tag 为 FunctionComponent 类型的组件会调用 renderWithHooks 方法执行组件然后拿到组件的执行结 阅读全文