当海风翻页时

React 是什么#

官方对 React 的定义只有一句话：The library for web and native user interfaces，一个为网页和原生界面构建用户界面的库（react.dev）。

两个词值得拆开看。“库”意味着它只管一件事：把组件拼成界面。路由、请求、数据缓存它都不管。官方在同一段里接着说，要做完整应用，建议配一个全栈框架，Next.js 或 React Router 都行。

“原生”指 React Native 那条线。同一套组件写法可以渲染到 iOS 与 Android，不只是浏览器 DOM。

一个组件长什么样#

React 组件就是 JavaScript 函数，返回一段描述界面的 JSX。

1
import { useState } from 'react'
2

3
function LikeButton({ initialCount }) {
4
  const [count, setCount] = useState(initialCount)
5

6
  return (
7
    <button onClick={() => setCount(count + 1)}>
8
      点赞 {count}
9
    </button>
10
  )
11
}

这段代码里有三个基本约定：组件是函数、UI 用 JSX 描述、状态用 useState 持有。界面怎么更新不用你写，setCount 之后 React 自己算。

四个特点#

组件化与声明式决定了怎么拆界面。UI 拆成独立组件，每个组件只管自己的逻辑与视图，拆到多细由你定。你描述“界面应该是什么样”，不写“先删这个节点、再插那个节点”；数据变了，React 负责把 DOM 改到与描述一致。

单向数据流与 JSX 决定了代码长相。数据通过 props 从父组件往下传，子组件要改数据就调用父组件传来的回调，没有双向绑定。结构直接写在 JavaScript 里，条件用 if，列表用 map()，官方在首页说“学 React 就是学编程”。

与 Vue 的四处差异#

两边都能做同一类应用，差异在定位与写法。

Vue 把结构与逻辑分得更开，上手快；React 把两者放进一个函数，可以直接用 JavaScript 本身的能力，代价是约定靠自觉。

并发渲染能观察到什么#

React 可以把一部分 UI 放到后台渲染。用 useTransition 包住的状态更新不阻塞输入，它返回的 isPending 用来显示加载态（useTransition）。

官方只讲到行为层：渲染分触发、渲染、提交三个阶段，重渲染时 React 只应用必要的最小改动（Render and Commit）。再往里的 Fiber 结构官方没有文档，只有社区梳理，本系列讲到原理时会逐条标明来源。

接下来#

这一篇是系列的起点。往下依次是 TSX 语法、开发环境搭建、构建工具，然后是组件与 Hook。