React

为什么需要Hook Hook 是 React16.8 的新增特性，可在不编写 class 组件的情况下，使用 state 以及其他 React 特性 从状态维护角度来说： class 组件可以定义 s

路由概念 核心： 改变 URL ，但是页面不进行整体的刷新 作用：维护 URL 和渲染页面的映射关系 目的： 通过 JavaScript 监听 URL 的改变，并且根据 URL 的不同重新渲染页面 通

RTK工具包 Redux Toolkit 是官方推荐用于编写 Redux 逻辑的工具包 由于 Redux 的逻辑编写过于繁琐，并且代码通拆分在多个文件中，Redux Toolkit 旨在成为编写 Re

异步数据流(redux-thunk) 网络请求可以在类组件的 componentDidMount 中发送，所以可以有这样的结构： 不合理的点： 异步请求的数据是需要放到 Store 中的，也就是和 R

connect实现原理 connect 的作用就是负责连接 React 和 Redux connect 底层本质是高阶函数 + 高阶组件，即 connect 函数接收函数作为参数，首先返回一个函数，返

为什么需要Redux 随着 JavaScript 单页应用日趋复杂，需要管理的状态或事件处理函数也越来越多，而且逐渐难以管理 其中包括服务器返回的数据、缓存数据、用户操作产生的数据等，也包括一些 UI

React中的CSS Vue 通过在 .vue 文件中的 <style> 标签来编写样式 通过 scoped 属性来决定样式是全局还是局部有效 通过 lang 属性来设置 less、sass 等预处理

过渡动画 React 社区提供了 react-transition-group 用来完成过渡动画，该库可以实现组件的入场和离场 官网： https://reactcommunity.org/react

高阶组件概念 高阶组件的英文是Higher-Order Components，简称为HOC 官方定义： 高阶组件是参数为组件，返回值为新组件的函数 高阶组件本质： 一个函数，该函数的参数是一个组件，返

Portals 某些情况下希望渲染的内容独立于父组件，甚至是独立于当前挂载到的 DOM 元素中(默认挂载到 root) Portal 提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的方案 第

受控组件 在 React 中，HTML 表单的处理方式和普通 DOM 元素不太一样，表单元素(如 <input>、<select>等)通常需要维护自己的 state，并根据输入进行更新 React 中

React更新机制 React 更新流程如下： React 在 props 或 state 发生改变时，会调用 React 的 render 方法，会创建不同的 DOM 树 如果进行全量比较更新(旧

为何使用setState React 中不能直接修改 state 的值来让界面发生更新，因为 React 并没有实现类似 Vue2 中的 Object.defineProperty，或是 Vue3 中

插槽意义和实现 意义： 让组件具备更强的通用性，组件内容不限制是某种元素，而是由使用组件的人来决定渲染的内容 实现： Vue 通过 <slot> 标签完成，而 React 有以下两种方案实现 chil

父传子props 父组件通过 属性 = 值 的形式来传递给子组件数据 子组件通过 props 参数获取父组件传递过来的数据，会自动保存到 this.props 中 使用 propTypes 对传入的数

生命周期概念 生命周期的概念： 事物从创建到销毁的过程，React 生命周期是抽象的概念，是描述组件从被渲染到被销毁的整个过程 装载阶段(Mount)： 组件首次在 DOM 树中被渲染的过程 更新过程

项目创建 全局安装 React 脚手架 查看 React 脚手架版本 使用脚手架创建 React 项目，项目名称不可包含大写字母 进入对应的目录并运行 项目结构分析 项目各个文件的作用 重新搭建项目

组件化概念 如果将页面中所有的处理逻辑全放一起，维护起来就会变得复杂，而且不利于后续的管理以及扩展 如果将一个页面拆分成一个个小功能块，每个功能块完成独立的功能，那么页面管理和维护就变得容易了 组件化

JSX简介 右侧赋值的标签并不是字符串，而是一段 JSX 的语法 JSX 是一种 JavaScript 的语法扩展，也称之为 JavaScript XML，因为看起来就是一段 XML 语法 JSX 用

React简介 概念： React 是将数据渲染为 HTML 视图的 JavaScript 库，用于构建用户界面，由组件组成，拥有自己的逻辑和外观 (官方简介：用于构建 Web 和原生交互界面的库)