Learn knowledge base

Appearance

React 手册 ​

一、React 简介 ​

1.1. React 的起源和目标 ​

  • React 诞生的背景：传统网页开发的痛点 (例如 DOM 操作复杂、代码难以维护等)
  • React 的目标：提供一种高效、灵活、可维护的构建用户界面的方式

1.2. React 的核心概念 ​

  • 组件化开发：将用户界面拆分成独立的、可复用的组件
  • JSX：使用 JavaScript 语法编写 HTML 结构，提高代码可读性和可维护性
  • Props：用于传递数据给组件，实现组件之间的通信
  • State：用于管理组件内部的状态，实现动态更新
  • 虚拟 DOM：React 使用虚拟 DOM 来优化 DOM 操作，提高性能

1.3. React 的优势 ​

  • 提高开发效率：组件化开发、虚拟 DOM 等特性简化了开发流程
  • 增强代码可维护性：组件化开发、JSX 语法等特性提高了代码可读性和可维护性
  • 提升用户体验：虚拟 DOM 优化了 DOM 操作，提高了页面性能和用户体验
  • 丰富的生态系统：React 拥有丰富的社区和生态系统，提供各种工具和库

二、创建 React 项目 ​

2.1. 使用 Create React App 快速创建项目 ​

  • Create React App 的优势：快速搭建项目、提供开箱即用的配置、方便部署
  • Create React App 的基本命令和使用
  • Create React App 项目结构和基本文件介绍

2.2. 手动创建 React 项目 ​

  • 手动创建项目的步骤：创建项目目录、配置 webpack、安装依赖等
  • 手动创建项目的优势：更灵活的配置、更深入的理解项目结构
  • 手动创建项目的挑战：需要掌握 webpack 等工具的配置

三、React 组件 ​

3.1. 函数式组件和类组件 ​

  • 函数式组件：使用函数定义组件，更简洁、更易于理解
  • 类组件：使用类定义组件，可以实现更复杂的功能，例如生命周期方法
  • React.FC：函数式组件的 TypeScript 类型，提供更好的类型检查
    • FC 是 FunctionComponent 的缩写
    • 自动包含了 children 属性类型
    • 提供更好的 IDE 支持和类型提示
    • 示例：
      typescript
      interface Props {
  name: string;
  age: number;
}

const MyComponent: React.FC<Props> = ({ name, age, children }) => {
  return (
    <div>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
      {children}
    </div>
  );
};

3.2. React.Fragment 和组件包装 ​

  • React.Fragment：一个特殊的组件，用于在不添加额外 DOM 节点的情况下包装多个子元素
    • 解决了组件必须返回单个根元素的限制
    • 可以使用短语法 <>...</> 或完整语法 <React.Fragment>...</React.Fragment>
    • Fragment 可以接收 key 属性（仅在完整语法中）
    • 示例：
      jsx
      // 使用短语法
const ListItems = () => (
  <>
    <li>Item 1</li>
    <li>Item 2</li>
  </>
);

// 使用完整语法（当需要key时）
const Items = items.map(item => (
  <React.Fragment key={item.id}>
    <dt>{item.term}</dt>
    <dd>{item.description}</dd>
  </React.Fragment>
));

3.3. 组件的渲染和更新 ​

  • 组件的渲染过程：React 如何将组件渲染到页面上
  • 组件的更新过程：React 如何更新组件的状态和视图
  • React 的虚拟 DOM 和 diff 算法

3.4. Props 的传递和使用 ​

  • Props 的概念和作用：用于传递数据给组件，实现组件之间的通信
  • Props 的传递方式：在父组件中传递 Props 给子组件
  • Props 的使用：在子组件中访问和使用 Props

3.5. State 的管理和更新 ​

  • State 的概念和作用：用于管理组件内部的状态，实现动态更新
  • State 的初始化：在组件中定义 State
  • State 的更新：使用 setState 方法更新 State
  • State 的最佳实践：避免直接修改 State、使用 setState 方法更新 State 等

3.6. 组件的生命周期方法 ​

  • 生命周期方法的概念和作用：在组件的不同阶段执行特定的操作
  • 常用的生命周期方法：constructor、componentDidMount、componentDidUpdate、componentWillUnmount 等
  • 生命周期方法的应用场景：例如在组件挂载时获取数据、在组件更新时执行特定的操作等

3.7. 组件的组合和复用 ​

  • 组件的组合：将多个组件组合在一起，构建更复杂的界面
  • 组件的复用：将相同的组件代码复用，提高开发效率
  • 组件的最佳实践：使用 Props 传递数据、使用 State 管理状态等

四、事件处理 ​

4.1. 事件处理的基本语法 ​

  • 使用事件监听器处理事件
  • 事件处理函数的定义和使用

4.2. 事件冒泡和事件捕获 ​

  • 事件冒泡：事件从最内层元素向外层元素传播
  • 事件捕获：事件从最外层元素向内层元素传播
  • 事件冒泡和事件捕获的应用场景：例如阻止事件冒泡、控制事件传播方向等

4.3. 事件处理的最佳实践 ​

  • 使用事件委托提高性能
  • 避免使用 inline 事件处理函数
  • 使用事件处理函数的最佳实践：例如使用箭头函数、避免使用 this 等

五、样式管理 ​

5.1. 内联样式 ​

  • 内联样式的概念和使用：直接在 JSX 中使用 style 属性设置样式
  • 内联样式的优缺点：方便快捷，但难以维护

5.2. CSS Modules ​

  • CSS Modules 的概念和使用：将 CSS 文件模块化，避免全局命名冲突
  • CSS Modules 的优势：提高代码可维护性、避免样式冲突

5.3. Styled Components ​

  • Styled Components 的概念和使用：使用 JavaScript 编写 CSS 样式，并与组件紧密结合
  • Styled Components 的优势：提高代码可读性、方便复用样式

5.4. Emotion ​

  • Emotion 的概念和使用：一个轻量级的 CSS-in-JS 库，提供多种样式管理方式
  • Emotion 的优势：灵活、高效、易于使用

六、React Hooks ​

6.1. Hooks 的概念和作用 ​

  • Hooks 的概念：允许在函数式组件中使用状态和生命周期方法
  • Hooks 的作用：简化代码、提高组件的可复用性

6.2. 常用 Hooks：useState、useEffect、useContext、useRef 等 ​

  • useState：用于管理组件内部的状态
  • useEffect：用于处理副作用，例如获取数据、设置定时器等
  • useContext：用于访问 React 的 Context API
  • useRef：用于创建对 DOM 元素的引用

6.3. 自定义 Hooks ​

  • 自定义 Hooks 的概念和作用：封装常用的逻辑，提高代码复用性
  • 自定义 Hooks 的示例：例如封装一个获取数据的 Hook

6.4. Hooks 的最佳实践 ​

  • 避免在循环中使用 Hooks
  • 避免在条件语句中使用 Hooks
  • 使用 Hooks 的最佳实践：例如使用自定义 Hooks、避免过度使用 Hooks 等

七、React Router ​

7.1. React Router 的基本概念和使用 ​

  • React Router 的概念：用于构建单页面应用程序 (SPA) 的路由库
  • React Router 的基本使用：配置路由、匹配路由、渲染组件

7.2. 路由配置和匹配 ​

  • 路由配置：定义路由规则，例如路径、组件等
  • 路由匹配：根据 URL 匹配相应的路由规则

7.3. 路由参数和查询参数 ​

  • 路由参数：在 URL 中传递参数，例如 /user/:id
  • 查询参数：在 URL 中传递查询参数，例如 /search?q=react

7.4. 嵌套路由和动态路由 ​

  • 嵌套路由：将路由嵌套，实现更复杂的路由结构
  • 动态路由：根据 URL 动态渲染组件

7.5. React Router 的最佳实践 ​

  • 使用 React Router 的最佳实践：例如使用嵌套路由、使用动态路由等

八、状态管理 ​

8.1. 状态管理的必要性 ​

  • 状态管理的挑战：当应用程序变得复杂时，管理状态会变得困难
  • 状态管理的目标：简化状态管理，提高代码可维护性

8.2. Context API 的使用 ​

  • Context API 的概念和作用：用于在组件树中共享数据
  • Context API 的基本使用：创建 Context、提供 Context、使用 Context
  • Context API 的应用场景：例如在应用程序中共享主题、语言等信息

8.3. Redux 的基本概念和使用 ​

  • Redux 的概念：一个可预测的状态管理库，用于管理应用程序的全局状态
  • Redux 的基本使用：创建 Store、定义 Action、编写 Reducer、连接组件

8.4. Redux 的核心概念：Action、Reducer、Store ​

  • Action：描述发生了什么事件
  • Reducer：根据 Action 更新 State
  • Store：保存 State，并提供更新 State 的方法

8.5. Redux 中间件和数据流 ​

  • Redux 中间件：用于扩展 Redux 的功能，例如异步操作、日志记录等
  • Redux 数据流：Action -> Reducer -> Store -> 组件

8.6. MobX 的基本概念和使用 ​

  • MobX 的概念：一个基于观察者模式的状态管理库，更加灵活易用
  • MobX 的基本使用：定义可观察对象、使用观察者模式更新状态

8.7. 状态管理的最佳实践 ​

  • 选择合适的状态管理方案：根据应用程序的复杂程度选择合适的方案