React学习 第一天

添加样式

在 React 中，你可以使用 className 来指定一个 CSS 的 class。它与 HTML 的 class 属性的工作方式相同：

<img className="avatar" />在这里插入代码片

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

React 并没有规定你如何添加 CSS 文件。最简单的方式是使用 HTML 的 标签。如果使用了构建工具或框架，可阅读其文档来了解如何将 CSS 文件添加到项目中。

显示数据

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 的特性，例如 for 循环 和 array 的 map() 函数 来渲染组件列表。

const products = [
  { title: 'Cabbage', id: 1 },
  { title: 'Garlic', id: 2 },
  { title: 'Apple', id: 3 },
];
const listItems = products.map(product =>
  <li key={product.id}>
    {product.title}
  </li>
);

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

响应事件

通过在组件中声明 事件处理 函数来响应事件：

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

  return (
    <button onClick={handleClick}>
      Click me
    </button>
  );
}
在这里插入代码片

注意：{andleClick} 的结尾没有小括号！不要 调用 事件处理函数：你只需 把函数传递给事件 即可。当用户点击按钮时 React 会调用你传递的事件处理函数。

更新界面

若需要保存一些信息，需要在组件中添加state

import { useState } from 'react';

然后可以在组件中生命一个state变量

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

你将从 useState 中获得两样东西：当前的 state（count），以及用于更新它的函数（setCount）。你可以给它们起任何名字，但按照惯例会像 [something, setSomething] 这样为它们命名。
第一次显示按钮时，count 的值为 0，因为你把 0 传给了 useState()。当你想改变 state 时，调用 setCount() 并将新的值传递给它。点击该按钮计数器将递增：

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

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

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

每个按钮会 “记住” 自己的 count，而不影响其他按钮。

使用Hook

以 use 开头的函数被称为 Hook。useState 是 React 提供的一个内置 Hook。可以在 React API 参考 中找到其他内置的 Hook。也可以通过组合现有的 Hook 来编写属于自己的 Hook。
Hook 比普通函数更为严格。只能在组件（或其他 Hook）的 顶层 调用 Hook。如果想在一个条件或循环中使用 useState，请提取一个新的组件并在组件内部使用它。

组件间共享数据

改变count ，每个按钮都会同步改变