React中文网课程笔记1—快速入门

概述

本章节将介绍开发者每天都会使用的 80% 的 React 概念。本章介绍的知识如下：

如何创建和嵌套组件
如何添加标签和样式
如何显示数据
如何渲染条件和列表
如何对事件做出响应并更新界面
如何在组件间共享数据

如何创建和嵌套组件

React 应用程序是由组件组成的。React 组件是返回标签的 JavaScript 函数，定义时组件名必须以大写字母开头，而 HTML 标签都是小写字母。举例如下：

TypeScript 复制代码

function MyButton() {
  return (
    <button>我是一个按钮</button>
  );
}

export default function MyApp() {
  return (
    <div>
      <h1>欢迎来到我的应用</h1>
      <MyButton />
    </div>
  );
}

说明：export default 关键字指定了文件中的主要组件。export default 关键字语法可以参考 MDN 和 javascript.info。

如何使用标签和样式

使用 JSX 编写标签

大多数 React 项目使用 JSX标签语法，原因是JSX很方便。所有 React中文网推荐的本地开发工具都开箱即用地支持 JSX。

JSX 比 HTML 更加严格：

标签必须闭合，如 <br />。
组件只能返回一个 JSX 标签，因此组件中多个标签必须被包裹到一个父级标签中，如 <div>...</div> 或空的 <>...</> 。举例如下：

TypeScript 复制代码

function AboutPage() {
  return (
    <>
      <h1>关于</h1>
      <p>你好。<br />最近怎么样？</p>
    </>
  );
}

如果开发者有大量 HTML 需要移植到 JSX 中，开发者可以使用在线转换器。

添加样式

React 中，开发者可以使用 className 为标签指定一个 CSS 的 class。它与 HTML 的 class 属性的工作方式相同：

TypeScript 复制代码

<img className="avatar" />

然后，开发者需要在一个单独的 CSS 文件中为标签的 CSS 类型 class编写规则：

TypeScript 复制代码

/* 在你的 CSS 文件中修改 */
.avatar {
  border-radius: 50%;
}

注意：React 没有规定开发者如何添加 CSS 文件，最简单的方式是使用 HTML 的 <link> 标签关联CSS文件，但如果开发者使用了构建工具或框架，请阅读其文档了解如何将 CSS 文件添加到项目中。

如何将TS数据显示到JSX标签

标签中用大括号包裹 JavaScript 变量或 JavaScript 表达式，可以提取出变量/表达式内容给标签。主要有2种使用方式：

标签内容中使用 JavaScript 变量。举例如下：

TypeScript 复制代码

return (
  <h1>
    {user.name}
  </h1>
);

标签属性中使用 JavaScript 变量。举例如下：

TypeScript 复制代码

return (
  <img
    className="avatar"
    src={user.imageUrl}
  />
);

如何根据不同条件渲染不同JSX标签

条件渲染

React 没有定义特殊的语法来编写条件语句，开发者需使用 JavaScript 代码编写条件，来指定JSX标签或JSX标签属性。下面以JSX标签为例说明：

if 语句举例

TypeScript 复制代码

let content;
if (isLoggedIn) {
  content = <AdminPanel />;
} else {
  content = <LoginForm />;
}
return (
  <div>
    {content}
  </div>
);

条件 ? 运算符举例

条件 ? 运算符与 if 区别：条件运算符工作于 JSX 标签内部。

TypeScript 复制代码

<div>
  {isLoggedIn ? (
    <AdminPanel />
  ) : (
    <LoginForm />
  )}
</div>

逻辑 && 语法举例

逻辑 && 语法与 if 区别：&&运算符工作于 JSX 标签内部。

TypeScript 复制代码

<div>
  {isLoggedIn && <AdminPanel />}
</div>

如何渲染JSX列表标签

React中通过for 循环和 array 的 map() 函数渲染JSX列表标签。代码举例如下：

TypeScript 复制代码

const products = [
  { title: '卷心菜', isFruit: false, id: 1 },
  { title: '大蒜', isFruit: false, id: 2 },
  { title: '苹果', isFruit: true, id: 3 },
];

export default function ShoppingList() {
  const listItems = products.map(product =>
    <li
      key={product.id}
      style={{
        color: product.isFruit ? 'magenta' : 'darkgreen'
      }}
    >
      {product.title}
    </li>
  );

  return (
    <ul>{listItems}</ul>
  );
}

JSX标签如何响应事件

TypeScript 复制代码

import { useState } from 'react';

export default function MyApp() {
  return (
    <div>
      <h1>独立更新的计数器</h1>
      <MyButton />
      <MyButton />
    </div>
  );
}

function MyButton() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <button onClick={handleClick}>
      点了 {count} 次
    </button>
  );
}

说明：开发者从 useState 中可获得两样东西：当前的 state，以及更新它的函数setState。开发者可以起任何名字，但按照惯例命名规则为： [something, setSomething] 。

使用 Hook

以 use 开头的函数称为 Hook 。useState 是 React 提供的一个内置 Hook。开发者可以在 React API 参考中找到其他内置的 Hook。开发者也可以通过组合现有的 Hook 来编写属于你自己的 Hook。

Hook 比普通函数更为严格。开发者只能在组件（或其他 Hook）的顶层调用 Hook。如果开发者想在一个条件或循环中使用 useState，请提取一个新的组件并在组件内部使用它。

如何在组件间共享数据

将组件中的状态变量定义到他们的公共父组件中，父组件通过prop 传递方式将数据和方法传递给子组件，来实现组件间共享数据。这种方案称为"状态提升"。

TypeScript 复制代码

import { useState } from 'react';

export default function MyApp() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <div>
      <h1>共同更新的计数器</h1>
      <MyButton count={count} onClick={handleClick} />
      <MyButton count={count} onClick={handleClick} />
    </div>
  );
}

function MyButton({ count, onClick }) {
  return (
    <button onClick={onClick}>
      点了 {count} 次
    </button>
  );
}