12 2022 档案
摘要：无论是在面试场景下，还是在实际的开发中，React 事件相关的问题都更倾向于考验我们对事件工作流、事件特征等逻辑层面问题的理解，而非对源码细节的把握。所以掌握事件工作流、事件特征等逻辑层面的“主要矛盾”就可以。 回顾原生 DOM 下的事件流 W3C 标准约定了一个事件的传播过程要经过以下 3 个阶段
阅读全文
摘要：为什么会产生“卡顿”这样的困局？ JavaScript 线程和渲染线程必须是互斥的：这两个线程不能够穿插执行，必须串行。当其中一个线程执行时，另一个线程只能挂起等待。在这样的机制下，当处理结构相对复杂、体量相对庞大的虚拟 DOM 树时，Stack Reconciler 需要的调和时间会很长，这就意味
阅读全文
摘要：从一道面试题说起 import React from "react"; import "./styles.css"; export default class App extends React.Component{ state = { count: 0 } increment = () => {
阅读全文
摘要：调和（Reconciliation）过程与 Diff 算法 Virtual DOM 是一种编程概念。在这个概念里，UI 以一种理想化的，或者说“虚拟的”表现形式被保存于内存中，并通过如 ReactDOM 等类库使之与“真实的” DOM 同步。这一过程叫作协调（调和）。 通过如 ReactDOM 等类
阅读全文
摘要：What:虚拟 DOM“是什么 虚拟 DOM 是 JS 对象 虚拟 DOM 是对真实 DOM 的描述 How:React 中的虚拟 DOM 大致是如何工作的 挂载阶段，React 将结合 JSX 的描述，构建出虚拟 DOM 树，然后通过 ReactDOM.render 实现虚拟 DOM 到真实 DO
阅读全文
摘要：React-Hooks 是什么？ 它是一套能够使函数组件更强大、更灵活的“钩子”。 为什么需要 React-Hooks？ 函数组件从设计思想上来看，更加契合 React 的理念。 告别难以理解的 Class； 解决业务逻辑难以拆分的问题； 使状态逻辑复用变得简单可行； 函数组件从设计思想上来看，更加
阅读全文
摘要：Context API 是 React 官方提供的一种组件树全局通信的方式。 Context API 有 3 个关键的要素：React.createContext、Provider、Consumer。 我们通过调用 React.createContext，可以创建出一组 Provider。Provi
阅读全文
摘要：发布-订阅模型 API 设计思路 发布-订阅模式中有两个关键的动作：事件的监听（订阅）和事件的触发（发布），这两个动作自然而然地对应着两个基本的 API 方法。 on()：负责注册事件的监听器，指定事件触发时的回调函数。 emit()：负责触发事件，可以通过传参使其在触发的时候携带数据 。 最后，只
阅读全文
摘要：从 React 15 说起 Mounting 阶段：组件的初始化渲染（挂载） constructor ：仅仅在挂载的时候被调用一次，我们可以在该方法中对 this.state 进行初始化； componentWillMount：只在挂载阶段被调用一次， render：在执行过程中并不会去操作真实 D
阅读全文
摘要：JSX 的本质是什么 JSX 是 JavaScript 的一种语法扩展，它和模板语言很接近，但是它充分具备 JavaScript 的能力，JSX 的本质是React.createElement这个 JavaScript 调用的语法糖。 JSX 是如何映射为 DOM 1. JSX 标签都被Babel转
阅读全文
