第七篇快速开始-序

作者: 深圳都这么冷 | 来源:发表于2023-02-04 08:28 被阅读0次

快速开始

欢迎使用 React 文档！本页将向您介绍您每天会用到的 80% 的 React 概念。

本章内容预告

如何创建和嵌套组件

如何添加标记和样式

如何显示数据

如何渲染条件表达式和列表表达式

如何响应事件和更新屏幕

如何在组件之间共享数据

创建和嵌套组件

React 应用程序由组件组成。组件是 UI（用户界面）的一部分，具有自己的逻辑和外观。组件可以小到一个按钮，也可以大到整个页面。
React 组件是返回标记的 JavaScript 函数：

function MyButton() {
  return (
    <button>I'm a button</button>
  );
}

现在您已经声明了 MyButton，您可以将它嵌套到另一个组件中：

export default function MyApp() {
  return (
    <div>
      <h1>Welcome to my app</h1>
      <MyButton />
    </div>
  );
}

请注意 <MyButton /> 以大写字母开头。这就是你如何知道它是一个 React 组件。 React 组件名称必须始终以大写字母开头，而 HTML 标签必须是小写字母。
export default关键字指定文件中的主要组件。如果您不熟悉某些 JavaScript 语法，MDN 和 javascript.info 有很好的参考资料。

使用JSX编写标记

您在上面看到的标记语法称为 JSX。它是可选的，但大多数 React 项目为了方便起见都使用 JSX。我们为本地开发推荐的所有工具都支持开箱即用的 JSX。

JSX 比 HTML 更严格。您必须关闭像 <br /> 这样的标签。你的组件也不能返回多个 JSX 标签。您必须将它们包装到共享的父级中，例如 <div>...</div> 或空的 <>...</> 包装器：

function AboutPage() {
  return (
    <>
      <h1>About</h1>
      <p>Hello there.<br />How do you do?</p>
    </>
  );
}

如果你有很多 HTML 要移植到 JSX，你可以使用在线转换器。

添加样式

在 React 中，您使用className 指定一个 CSS 类。它的工作方式与 HTMLclass属性相同：

<img className="avatar" />

然后在单独的 CSS 文件中为其编写 CSS 规则：

/* In your CSS */
.avatar {
  border-radius: 50%;
}

React 没有规定你如何添加 CSS 文件。在最简单的情况下，您将向 HTML 添加一个 <link> 标记。如果您使用构建工具或框架，请查阅其文档以了解如何将 CSS 文件添加到您的项目中。

显示数据

JSX 允许您将标记放入 JavaScript。花括号让你“逃回”到 JavaScript 中，这样你就可以从代码中嵌入一些变量并将其显示给用户。例如，这将显示 user.name：

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

你也可以从 JSX 属性“转义到 JavaScript”，但你必须使用花括号而不是引号。例如，className="avatar" 将 "avatar" 字符串作为 CSS 类传递，但 src={user.imageUrl} 读取 JavaScript user.imageUrl 变量值，然后将该值作为 src 属性传递：

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

您也可以在 JSX 大括号内放置更复杂的表达式，例如，字符串连接：

const user = {
  name: 'Hedy Lamarr',
  imageUrl: 'https://i.imgur.com/yXOvdOSs.jpg',
  imageSize: 90,
};

export default function Profile() {
  return (
    <>
      <h1>{user.name}</h1>
      <img
        className="avatar"
        src={user.imageUrl}
        alt={'Photo of ' + user.name}
        style={{
          width: user.imageSize,
          height: user.imageSize
        }}
      />
    </>
  );
}

在上面的示例中，style={{}} 不是特殊语法，而是 style={ } JSX 大括号内的常规 {} 对象。当您的样式依赖于 JavaScript 变量时，您可以使用 style 属性。

条件渲染

在 React 中，没有用于编写条件的特殊语法。相反，您将使用与编写常规 JavaScript 代码时相同的技术。例如，您可以使用 if 语句有条件地包含 JSX：

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

如果你喜欢更紧凑的代码，你可以使用条件操作符？。与 if 不同，它在 JSX 内部工作：

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

当你不需要 else 分支时，你也可以使用更短的逻辑 && 语法：

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

所有这些方法也适用于有条件地指定属性。如果您不熟悉这种 JavaScript 语法的某些部分，一开始您可以始终使用 if...else。

渲染列表

您将依赖 JavaScript 功能，例如 for 循环和数组 map() 函数来呈现组件列表。
例如，假设您有一个产品数组：

const products = [
  { title: 'Cabbage', id: 1 },
  { title: 'Garlic', id: 2 },
  { title: 'Apple', id: 3 },
];

在您的组件中，使用 map() 函数将产品数组转换为 <li> 数组：

const listItems = products.map(product =>
  <li key={product.id}>
    {product.title}
  </li>
);

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

注意 <li> 有一个 key 属性。对于列表中的每个项目，您应该传递一个字符串或数字，以在其兄弟项中唯一标识该项目。通常，键应该来自您的数据，例如数据库 ID。如果您稍后插入、删除或重新排序项目，React 将依赖您的键来了解发生了什么。

事件响应

您可以通过在组件内声明事件处理函数来响应事件：

function MyButton() {
  function handleClick() {
    alert('You clicked me!');
  }

  return (
    <button onClick={handleClick}>
      Click me
    </button>
  );
}

注意 onClick={handleClick} 最后没有括号！不要调用事件处理函数：你只需要将它传递下去。当用户单击按钮时，React 将调用您的事件处理程序。

更新屏幕

通常，您会希望您的组件“记住”一些信息并显示它。例如，您可能想要计算单击按钮的次数。为此，请将状态添加到您的组件。
首先，从 React 导入 useState：

import { useState } from 'react';

现在你可以在你的组件中声明一个状态变量：

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

您将从 useState 获得两件事：当前状态 (count) 和让您更新它的函数 (setCount)。你可以给它们起任何名字，但惯例是像 [something, setSomething] 这样称呼它们。
第一次显示按钮时，计数将为 0，因为您将 0 传递给了 useState()。当你想改变状态时，调用 setCount() 并将新值传递给它。单击此按钮将增加计数器：

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

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

  return (
    <button onClick={handleClick}>
      Clicked {count} times
    </button>
  );
}

React 会再次调用你的组件函数。这次，计数将为 1。然后为 2。依此类推。

如果多次渲染同一个组件，每个组件都会获得自己的状态。尝试分别单击每个按钮：

import { useState } from 'react';

export default function MyApp() {
  return (
    <div>
      <h1>Counters that update separately</h1>
      <MyButton />
      <MyButton />
    </div>
  );
}

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

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

  return (
    <button onClick={handleClick}>
      Clicked {count} times
    </button>
  );
}

注意每个按钮如何“记住”它自己的计数状态并且不影响其他按钮。

使用Hooks

以 use 开头的函数称为 Hooks。 useState 是 React 提供的内置 Hook。您可以在 React API 参考中找到其他内置 Hook。您还可以通过组合现有的 Hooks 来编写自己的 Hooks。

钩子比常规函数更具限制性。您只能在组件的顶层调用 Hooks（或其他 Hooks）。如果您想在条件或循环中使用 useState，请提取一个新组件并将其放在顶层。

组件间共享数据

在前面的例子中，每个 MyButton 都有自己独立的计数，当每个按钮被点击时，只有被点击的按钮的计数发生变化：

初始时每个按钮的count都是0

第一个按钮更新到1

但是，您通常需要组件来共享数据并始终一起更新。
要使两个 MyButton 组件显示相同的计数并一起更新，您需要将状态从单个按钮“向上”移动到包含所有按钮的最近的组件。

在此示例中，它是 MyApp：

初始时，myApp的count是0并且向下传给两个孩子

点击后，myApp的count更新为1，然后向下传给两个孩子

现在，当您单击任一按钮时，MyApp 中的计数将发生变化，这将更改 MyButton 中的两个计数。以下是您如何在代码中表达这一点。
首先，将状态从 MyButton 上移到 MyApp：

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

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

  return (
    <div>
      <h1>Counters that update separately</h1>
      <MyButton />
      <MyButton />
    </div>
  );
}

function MyButton() {
  // ... we're moving code from here ...
}

然后，将状态从 MyApp 向下传递到每个 MyButton，连同共享的点击处理程序。您可以使用 JSX 花括号将信息传递给 MyButton，就像您之前使用 <img> 等内置标签所做的那样：

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

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

  return (
    <div>
      <h1>Counters that update together</h1>
      <MyButton count={count} onClick={handleClick} />
      <MyButton count={count} onClick={handleClick} />
    </div>
  );
}

你像这样传递下来的信息叫做props。现在 MyApp 组件包含count状态和 handleClick 事件处理程序，并将它们作为props传递给每个按钮。

最后，更改 MyButton 以读取您从其父组件传递的props：

function MyButton({ count, onClick }) {
  return (
    <button onClick={onClick}>
      Clicked {count} times
    </button>
  );
}

单击按钮时，将触发 onClick 处理程序。每个按钮的 onClick 属性都设置为 MyApp 中的 handleClick 函数，所以它里面的代码会运行。该代码调用 setCount(count + 1)，递增计数状态变量。新的计数值作为 prop 传递给每个按钮，因此它们都显示新值。

这被称为“提升状态”。通过向上移动状态，我们在组件之间共享它。

import { useState } from 'react';

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

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

  return (
    <div>
      <h1>Counters that update together</h1>
      <MyButton count={count} onClick={handleClick} />
      <MyButton count={count} onClick={handleClick} />
    </div>
  );
}

function MyButton({ count, onClick }) {
  return (
    <button onClick={onClick}>
      Clicked {count} times
    </button>
  );
}

下一步

到目前为止，您已经了解了如何编写 React 代码的基础知识！
查看教程，将它们付诸实践，并使用 React 构建您的第一个迷你应用程序。

第七篇快速开始-序

快速开始

本章内容预告

创建和嵌套组件

使用JSX编写标记

添加样式

显示数据

条件渲染

渲染列表

事件响应

更新屏幕

使用Hooks

组件间共享数据

下一步

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

第七篇 快速开始-序

快速开始

本章内容预告

创建和嵌套组件

使用JSX编写标记

添加样式

显示数据

条件渲染

渲染列表

事件响应

更新屏幕

使用Hooks

组件间共享数据

下一步

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

第七篇快速开始-序