17370845950

React是用于构建用户界面的JavaScript库，核心是函数组件+Hooks实现状态驱动视图，需注意不可变更新、正确使用key、单向数据流及自定义Hook依赖完整性。

React 不是框架，而是一个用于构建用户界面的 JavaScript 库；它本身不处理路由、状态持久化或 HTTP 请求，这些需要额外选型。你用它写组件，不是“学完 React 就能做完整应用”，而是“用 React 写出可复用、可组合、响应数据变化的 UI 单元”。

React 组件怎么写：函数组件 + useState 是当前标准写法

过去类组件（class Component）已基本被弃用。现在默认用函数组件配合 Hooks。关键点不是“语法多炫”，而是理解“状态驱动视图”的闭环：

• useState 声明一个状态变量和更新函数，每次调用更新函数会触发组件重渲染
• JSX 不是字符串模板，是 JavaScript 的语法扩展，最终被编译为 React.createElement() 调用
• 组件名必须大写（如 Button），否则 JSX 会把它当 HTML 原生标签处理

function Counter() {
  const [count, setCount] = useState(0);

  return (
    
      
Count: {count}
       setCount(count + 1)}>+1
    
  );
}

为什么 key 属性不能用 index？

当你用 map() 渲染列表时，React 要靠 key 区分每个子元素的身份。用数组索引（

• 列表项顺序变动（如排序、拖拽）→ React 错误复用 DOM 节点，导致输入框失焦、动画错乱
• 列表项增删 → 状态错位（比如第 2 个 item 的 checked 状态跑到第 3 个上）

正确做法：使用每项数据中稳定唯一的标识，如 user.id、post.slug。没有就生成（但别用 Date.now() 或 Math.random()，避免重复）。

组件通信：父传子用 props，子传父用回调函数

React 没有全局状态或双向绑定。父子之间传递数据靠显式约定：

• 父组件把数据和函数作为 props 传给子组件（如 ）
• 子组件内部调用传入的函数（如 props.onChange(newVal)），由父组件决定如何响应
• 跨层级通信不要硬传 props，改用 useContext（适合主题、权限等低频变更场景）或状态管理库（如 Zustand、Jotai）

别在子组件里直接修改父组件的 state 变量 —— 这违反单向数据流，调试时你会找不到状态更新源头。

真实项目里最容易被忽略的点

初学者常卡在“组件渲染了但 UI 没变”，问题往往不在 React 本身，而在：

• 状态更新用了赋值（obj.name = 'x'）而非不可变更新（{...obj, name: 'x'}），React 浅比较发现引用没变，跳过渲染
• 异步操作后更新状态，但组件已卸载（如请求返回时页面已跳走），导致 setState on unmounted component 警告甚至内存泄漏
• 自定义 Hook 里忘了加依赖数组（useEffect(..., [])），或数组漏写了某个变量，造成闭包捕获旧值

这些问题不会报错，但会让 UI 表现和预期不一致 —— 它们藏在“数据流是否真正贯通”这个细节里，而不是语法对不对。