React 文档
导读与全书目录表：见同目录 01-React 入门：简介·特性与设计范式.md 开头。
State 和 Props 的区别
回答
shell
Props 是组件的入参，由父组件传递，只读不可改，用于组件间通信；
State 是组件内部的状态，可通过 setState（类组件）/useState（函数组件）修改，修改后会触发组件重新渲染。
另外要注意，props 的变更也会触发子组件重新渲染；类组件中 setState 常表现为批量、异步提交（以 React 18 的自动批处理为准），需注意批量更新与函数式更新。为什么不能直接修改 state，要 setState？
shell
① React 中 state 是不可变的，直接修改 state 不会触发组件重新渲染（React 监测不到 state 变化）；
② setState 是异步的，React 会批量处理 setState，合并多次更新，提升性能；
③ setState 可以接收函数（比如 setState (prev => prev + 1)），能获取最新的 state，避免异步导致的状态错误。类组件和函数组件
概念
- 类组件：基于 ES6 的 class 语法，通过继承 React.Component 类来创建组件，在类组件中可以使用 state 和 生命周期函数，必须实现 render 方法，返回 JSX 模板
- 函数组件： 本质上是纯函数，接收 props 作为参数，return JSX 模板, 没有 state 和 生命周期函数，通过 React Hooks（如 useState, useEffect）引入状态和副作用能力（无生命周期方法，但 Hooks 可以模拟类似行为）
区别
shell
维度 类组件 函数组件（with Hooks）
语法 Class 语法 函数语法
状态管理 this.state 和 this.setState useState、useReducer
副作用处理 生命周期方法（如 componentDidMount） useEffect、useLayoutEffect
代码复用 高阶组件（HOC）、Render Props 自定义 Hooks
性能优化 shouldComponentUpdate、PureComponent React.memo、useMemo、useCallback
this 绑定问题 需要处理 this（如箭头函数或绑定） 无 this，直接闭包访问 props/state
未来趋势 逐步被函数组件取代 React 官方推荐如何选择
- 新项目：优先使用函数组件 + Hooks，更符合 React 未来方向
- 复杂生命周期场景：类组件的生命周期方法可能更直观（如精确控制更新），但 Hooks 的 useEffect 也能覆盖大多数场景。
为什么 React 推荐函数组件？
- 逻辑复用：Hooks 解决了类组件中横切关注点（Cross-Cutting Concerns）难以复用的问题。
- 代码组织：相关逻辑可以集中在一个 useEffect 或自定义 Hook 中，而非分散在多个生命周期方法里。
注意事项
- Hooks 的规则：只能在函数组件或自定义 Hooks 顶层调用，不可在条件或循环中使用。
- 兼容性：React 16.8+ 才支持 Hooks，类组件不会被废弃，但新特性（如 Concurrent Features）可能更偏向 Hooks。
react 类组件和函数组件的区别？
shell
早期类组件是核心，有完整的生命周期和 this 指向，适合复杂逻辑；函数组件最初是无状态组件，只能接收 props 渲染 UI。React16.8推出 Hooks 后，函数组件可以通过 useState、useEffect 等 Hook 实现状态管理和生命周期逻辑，现在我开发中优先用函数组件 —— 它代码更简洁、无 this 陷阱，还能通过自定义 Hook 复用逻辑，比如项目中我封装了 useRequest Hook 处理接口请求，类组件则很少用，除非维护老项目。
# 核心区别
类组件基于 class 并继承 React.Component，依赖 render() 渲染，有 this 和固定生命周期钩子，状态是对象且需 setState 修改
函数组件是普通函数，直接返回 JSX，无 this，用 useEffect 模拟生命周期，useState 管理任意类型的状态。
# 使用
新代码优先用函数组件 + Hooks，类组件仅用于维护老项目或特殊场景