Runoob-React

React学习笔记

React项目说明

---

1. 项目结构
2. 核心文件解析
3. React组件的基本结构
   1. 函数组件
   2. 类组件
   3. JSX
   4. state
   5. props
4. React项目的运行流程

React元素渲染

---

1. 将元素渲染到DOM中
2. 更新元素渲染

React JSX

---

1. JSX语法规则
   1. 必须闭合标签
   2. class用不了，要改成className
   3. 自定义组件大写开头
   4. 注释一斜杠一颗星
   5. 根元素：return只能有一个根节点
2. 表达式嵌入
3. 条件渲染
4. 列表渲染
5. 样式处理
   1. 内联样式
   2. CSS Modules
6. 使用JSX
   1. 独立文件（就是引入到
   2. JavaScript表达式：JSX中不能用if else语句但是可以用三元运算
   3. 样式：用camelCase语法设置内联样式，React会在指定数字后面自动添加px
   4. 注释：要写在花括号里面

React组件

---

1. 函数组件
   1. 函数声明
   2. 箭头函数
   3. 简化写法（单行返回）
2. 类组件
3. 复合组件
4. Props (属性)
   1. 基础用法
   2. Props 解构
   3. Props 的类型：Props 可以是任何 JavaScript 值
   4. Children Props：特殊的 props，用于传递组件的子内容
   5. Props 的不可变性：重要原则：永远不要修改 props!
5. 组件的组合与复用
   1. 组合模式：基础组件组合成复杂组件
   2. 容器组件：处理逻辑和状态
   3. 高阶组件思想 (通过组合实现)：比如通过加载的状态包装组件
6. 组件命名规范
   1. 命名规则：大写字母开头
   2. 文件命名
7. 组件的导出与导入
   1. 默认导出：export default function 函数名
   2. 命名导出：export function 函数名 ; import {Name1,Name2,…} from 文件名；
   3. 混合导出：import Name1,{Name2,Name3,..} from 文件名；
8. 组件设计原则
   1. 单一职责原则：每个组件应该只做一件事
   2. 保持组件简洁
   3. 合理使用 Props：不要传递过多的 props
   4. 避免深层嵌套: 过深的组件嵌套会导致 props drilling 问题；Props Drilling(道具钻取) 指在组件树中，某个数据需要从顶层组件逐层传递到深层组件，但中间的组件并不真正使用这些数据，只是起到”传递”的作用。

React 组件状态(State)

---

2026-01-27

React Props

---

1. 默认 Props
2. 多个 Props
3. propTypes 验证
4. 解构 Props

2026-01-28