组件

假设一个页面需要在三个地方显示相同的问候卡片，每个卡片有相同的标题和布局。如果你复制三次标记，那么每当设计改变时，你就有三个地方需要更新。React 的解决方案是：把这段 UI 写一次，然后以**组件**的形式复用它，一个返回 JSX（UI 描述）的 JavaScript 函数。你可以像使用 HTML 标签一样使用它，React 会调用这个函数来确定在屏幕上显示什么。

最简单的组件长这样：

jsx

function Greeting() {
  return <h1>Hello</h1>
}

Greeting 是一个返回 <h1>Hello</h1> 的函数。要让它真正显示出来，你需要在另一个组件里渲染它，像使用 HTML 标签一样使用它：

jsx

function App() {
  return (
    <div>
      <Greeting />
      <Greeting />
    </div>
  )
}

App 也是一个组件。它在一个 div 里渲染了两个 Greeting 组件，每个都会打印自己的 <h1>Hello</h1>。这就是组合：你构建小组件，然后把它们组合成更大的组件，一直到完整的应用。

这里有几条规则需要遵循。组件名要以大写字母开头。Greeting 和 App 之所以能用作标签，是因为 React 能把它们和普通 HTML 元素（如 div 或 h1）区分开，普通 HTML 元素都是小写开头。返回 JSX 的组件也必须返回一个单一的根元素，就像 App 把两个 Greeting 标签用一个 div 包裹起来一样。这是初学者最常出错的地方：如果直接返回两个并行的元素而不用元素包裹，React 会报错。如果你需要返回并行元素而不想额外添加一个 div，可以用 Fragment：

jsx

function Greeting() {
  return (
    <>
      <h1>Hello</h1>
      <p>Welcome back</p>
    </>
  )
}

<> 和 </> 就是 Fragment。它把 h1 和 p 组合成一个返回值，但不会在页面上添加额外的元素。

版本说明

老版本的 React 代码常常用类而不是函数来定义组件：

jsx

class Greeting extends React.Component {
  render() {
    return <h1>Hello</h1>
  }
}

你在现有代码库里还是会看到这样的类组件。本手册始终使用函数组件，这是当前编写 React 的标准方式。关于 React 如何从一种风格发展到另一种风格，详见历史和版本。

JunoA component is a function 核心思想可以用一句话总结：组件就是一个函数，用 <Greeting /> 这样的标签调用它会执行该函数并显示它返回的结果。一旦理解了这一点，学习 React 的其余内容就是掌握你可以在这些函数内写什么。

接下来：JSX，你在这些 return 语句内看到的语法。

组件 ​

组件