随笔分类 - React
摘要：无论是在面试场景下，还是在实际的开发中，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转
阅读全文
摘要：react-router不像vue-router一样有很多钩子函数，可以做路由守卫。想实现路由守卫，可以用高阶组件来实现。
阅读全文
摘要：function map(arr, fn) { let newArr = []; for (let i = 0; i item+1)) console.log(filter(arr,(item)=>item>3))
阅读全文
摘要：方法一：eject 打开 package.json ，可以看到eject。运行 npm run eject 可以让由create-react-app创建的项目的配置项暴露出来。 运行npm run eject ,此时，项目中多了一个config文件，并且各个配置文件已经暴露出来了。(运行npm ru
阅读全文
摘要：高阶函数的基本概念： 函数可以作为参数被传递，函数可以作为函数值输出。 高阶组件基本概念： 高阶组件就说接受一个组件作为参数，并返回一个新组件的函数。 为什么需要高阶组件 多个组件都需要某个相同的功能，使用高阶组件减少重复实现。 编写高阶组件： 1.实现一个普通组件。 2.把普通组件用函数包裹，并用
阅读全文
摘要：react没有vue插槽的概念，但是有嵌套组件，可以用嵌套组件实现类似插槽的功能。下例中，color,name,btn相当于具名插槽，children相当于匿名插槽。
阅读全文
摘要：方法一：最麻烦的写法，不推荐 方法二：在构造函数里统一绑定，不常用。 方法三：最常见的写法。 方法四：可以传参数。
阅读全文
摘要：create-react-app默认不支持装饰器的，需要做以下配置。 打开 package.json ，可以看到eject。运行 npm run eject 可以让由create-react-app创建的项目的配置项暴露出来。 运行 npm run eject 此时，项目中多了一个config文件，
阅读全文
摘要：TodoItem.propTypes={ content:PropTypes.string, text:PropTypes.string.isRequired, handleDeleteItem:PropTypes.func, index:PropTypes.number } TodoItem.defaultProps={ text:"1", }
阅读全文
摘要：声明式开发 减少dom操作，减少代码量 可以与其他框架并存 组件化开发 单向数据流 视图层框架 大型项目需要与其他数据层框架一起使用 函数式编程 方便自动化测试
阅读全文
摘要：概述： react-saga有3个重要的函数:call ,put takeEvery。 call:在worker saga里执行异步函数； put:异步函数有结果的时候，派发action； takeEvery:当监听到aciton时,执行worker saga。 saga主要用到的是generato
阅读全文
