组件

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

这是最小的例子：

jsx

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

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

jsx

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

App 也是一个组件。它在一个 div 内渲染两个 Greeting 组件，每个都输出自己的 <h1>Hello</h1>。这就是组合：你构建小组件，再把它们组合成更大的组件，直到组成一整个应用。

这有几条规则要遵守。组件名必须以大写字母开头。Greeting 和 App 能作为标签工作，是因为 React 能把它们和普通的 HTML 元素（如 div 或 h1）区分开来，而后者以小写字母开头。返回 JSX 的组件还必须返回一个单一的根元素，就像 App 用一个外层 div 包裹它的两个 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 写法。参考 History and versions 了解 React 是如何从一种风格演变到另一种的。

Juno组件是一个函数整个概念可以用一句话总结：组件是一个函数，用像 <Greeting /> 这样的标签调用它会运行这个函数并显示它的返回值。一旦理解了这一点，React 的其他部分就是学习在这些函数内部可以放什么。

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

组件 ​

组件