React绘制用户界面（UI）篇

本文章基于React新文档Beta版，用于重新学习复习React知识，重新学习了解React的新特性。

什么是组件

组件（Components）是 React 的核心概念之一。它是构建用户界面（UI）的基石。React中一切皆为组件。

在HTML当中，由许多的标签组成一个网页，例如

<article>
  <h1>My First Component</h1>
  <ol>
    <li>Components: UI Building Blocks</li>
    <li>Defining a Component</li>
    <li>Using a Component</li>
  </ol>
</article>

        对于React的组件而言，则是由SS，JavaScript，HTML组合而成。组建完成后，可以作为应用程序可以重复使用的UI元素，其使用形式和HTML大致相同，通过排列和组合，嵌套来完成网页的构建。随着项目的进展，可以发现许多组件可以重复使用，大大减少了开发时间

<PageLayout>
  <NavigationHeader>
    <SearchBar />
    <Link to="/docs">Docs</Link>
  </NavigationHeader>
  <Sidebar />
  <PageContent>
    <TableOfContents />
    <DocumentationText />
  </PageContent>
</PageLayout>

定义组件

React 将交互性放在第一位，同时仍然使用了与以前相同的技术：一个 React 组件就是一个 JavaScript 函数，并且你可以在函数中书写 markup

 

下面讲解如何构建一个组件：

第一步：导出（export）组件

export default前缀是一个 标准的 JavaScript 语法 （并非 React 专用）。改语法用于在文件中标记主函数（main function）以便将来在其它文件中导入（import）该函数。

第二部：定义函数

通过function Profile() {}形式，你定义了一个名为Profile的 JavaScript 函数。

React 组件就是普通的 JavaScript 函数，但 函数名必须以大写字母开头，否则将无法正常使用！

第三步：添加 markup

该组件返回一个<img /> 标签（tag），并带有src和alt属性。<img />从书写上看和 HTML 的标签是一样的，但实际上，它在底层是 JavaScript！这种语法被称为 JSX，它赋予你在 JavaScript 种书写 markup 的能力。

return 语句可以全部写在一行上，也可以不写在同一行，但要用圆括号括起来

//返回内容与return在同一行
return <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />;

//返回内容与return不在同一行，需要用圆括号括起来
return (
  <div>
    <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
  </div>
);

我们定义了Profile组件后，就可以将其嵌套在其他组件中，也可以进行反复渲染使用。在这里Gallery是父组件，Profile称为子组件

function Profile() {
  return (
    <img
      src="https://i.imgur.com/MK3eW3As.jpg"
      alt="Katherine Johnson"
    />
  );
}

export default function Gallery() {
  return (
    <section>
      <h1>Amazing scientists</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

导入（import）及导出（export）组件

组件的魔力在于可重用性：你可以创建由其它组件组成的新组件。但是，当你嵌套越来越多的组件时，将各个组件拆分到单独的文件中会更有意义。这让你能够轻松地查找文件，并在更多的地方重用组件。

根组件

刚才我们创建的Gallery和Profile都是在根组织文件中写的，在