React Describing UI

React 是一个用于构建用户界面（UI）的 JavaScript 库，用户界面由按钮、文本和图像等小单元内容构建而成。React 帮助你把它们组合成可重用、可嵌套的组件。从 web 端网站到移动端应用，屏幕上的所有内容都可以被分解成组件。

你的第一个组件

React 应用是由被称为组件的独立 UI 片段构建而成。React 组件本质上是可以任意添加标签的 JavaScript 函数。

导入与导出组件

你可以在一个文件中声明许多组件，但文件的体积过大会变得难以浏览。为了解决这个问题，你可以在一个文件中只导出一个组件，然后再从另一个文件中导入该组件：

使用 JSX 编写标签

每个 React 组件都是一个 JavaScript 函数，它可能包含一些标签，React 会将其渲染到浏览器中。React 组件使用一种叫做 JSX 的语法扩展来表示该标签。JSX 看起来很像 HTML，但它更为严格，可以显示动态信息。

在 JSX 中使用大括号编写 JavaScript

JSX 可以让你在 JavaScript 文件中编写类似 HTML 的标签语法，使渲染逻辑和内容展示维护在同一个地方。有时你会想在标签中添加一点 JavaScript 逻辑或引用一个动态属性。在这种情况下，你可以在 JSX 中使用花括号来为 JavaScript “开辟通道”。

const info = {
  name: 'HeiBuNeko',
};

export default function Component() {
  return (
    <h1>{info.name}</h1>
  );
}

将 `props` 传递给一个组件

React 组件使用 props 来进行组件之间的通讯。每个父组件都可以通过为子组件提供 props 的方式来传递信息。

export default function Page() {
  return (
    <Component info={info}>Content</Component>
  );
}

function Component({ info, children }) {
  return (
    <div className="component">
      {children}
    </div>
  );
}

条件渲染

你的组件经常需要根据不同的条件来显示不同的东西。在 React 中，你可以使用 JavaScript 语法，如 if 语句、&& 和 ? : 操作符有条件地渲染 JSX。

export default function Page() {
  const isShow = true
  return (
    {isShow && <Component />}
  );
}

渲染列表

通常，你需要根据数据集合来渲染多个较为类似的组件。你可以在 React 中使用 JavaScript 的 filter() 和 map() 来实现数组的过滤和转换，将数据数组转换为组件数组。

export default function Page() {
  const components = list.map(item => <div>content</div>)
  return (
    <div>{components}</div
  );
}

保持组件的纯粹

有些 JavaScript 函数是纯粹的。纯函数的基本定义：

只负责自己的任务。它不会更改在该函数调用前就已存在的对象或变量。
输入相同，输出也相同。在输入相同的情况下，对纯函数来说应总是返回相同的结果。

将 UI 视为树

React 使用树形关系建模以展示组件和模块之间的关系。

React 渲染树是组件之间父子关系的表示。

位于树顶部、靠近根组件的组件被视为顶层组件。没有子组件的组件被称为叶子组件。对组件的这种分类对于理解数据流和渲染性能非常有用。

对 JavaScript 模块之间的关系进行建模是了解应用程序的另一种有用方式。我们将其称为模块依赖树。

构建工具经常使用依赖树来捆绑客户端下载和渲染所需的所有 JavaScript 代码。对于 React 应用程序，打包大小会导致用户体验退化。了解模块依赖树有助于调试此类问题。