当海风翻页时

组件是返回 JSX 的函数#

1
function Profile() {
2
  return <img src="/avatar.png" alt="头像" />
3
}
4

5
export default function Gallery() {
6
  return (
7
    <section>
8
      <h1>团队成员</h1>
9
      <Profile />
10
      <Profile />
11
    </section>
12
  )
13
}

两条规则。组件名必须以大写字母开头，React 靠这一点区分组件与普通 DOM 标签。组件要返回能被 React 渲染的东西，通常是 JSX。

<Profile /> 看起来像 HTML 标签，实际是在调用那个函数。所谓渲染，就是 React 一层层调用你的组件（Render and Commit）。

入参是只读的#

1
function Avatar({ person, size = 64 }) {
2
  return (
3
    <img
4
      src={person.src}
5
      alt={person.name}
6
      width={size}
7
      height={size}
8
    />
9
  )
10
}

props 由父组件传入，接收方不能改它。渲染必须是纯的：同样的入参给出同样的输出，而且不去动渲染之前就存在的对象。

默认值直接写在解构里，写成 size = 64 这种形式。注意 React 19 起，函数组件的 defaultProps 已经被移除、写了会被静默忽略，别再依赖它（类的 defaultProps 仍然有效）。要改数据，让父组件传一个回调下来。

children 也是一种 props#

1
function Card({ children }) {
2
  return <div className="card">{children}</div>
3
}
4

5
<Card>
6
  <h2>标题</h2>
7
  <p>正文</p>
8
</Card>

标签之间的内容会作为 children 传进去。它是最省事的一种组合方式：Card 不必知道里面装的是什么。

类组件只在读旧代码时需要#

1
class Counter extends Component {
2
  state = { count: 0 }
3

4
  render() {
5
    return (
6
      <button onClick={() => this.setState({ count: this.state.count + 1 })}>
7
        {this.state.count}
8
      </button>
9
    )
10
  }
11
}

Component 与 PureComponent 现在归在官方的 Legacy API 里。新代码用函数组件加 Hook。读旧代码时会遇到这些在 React 19 里已被移除的写法：函数组件的 propTypes、字符串 ref（ref="box" 配 this.refs.box）、以及 contextTypes 与 getChildContext。

函数组件的 props 类型直接用 TypeScript 标在参数上，不必额外套一层 React.FC。

拆到什么程度#

判据是可复用与单一职责，不是行数。只在一处出现、又不会再变化的大组件，拆开只是多一层要读的东西。

真正值得抽的是重复的部分：界面重复就抽组件，逻辑重复就抽自定义 Hook，后者见 自定义 Hook。

四条边界#

组件名必须大写开头。小写开头会被当成 HTML 标签，页面直接空掉。

一个组件只返回一个根节点。不想多套一层容器，就用 <> 与 </>。

渲染期间不要改外部对象、不要直接操作 DOM、不要发请求。这些属于事件处理函数或 Effect。

别在渲染里现算随机数或当前时间来生成 key。渲染要可重复，key 应当来自你的数据。