速成react篇一：如何创建和嵌套组件，如何添加标签和样式，如何显示数据，如何渲染条件和列表，如何对事件做出响应并更新界面

react和vue是当下比较流行的前端框架，因此学习react也是非常必要的。

最近几篇文章，我将更新我对react的一些学习。

React 应用程序是由 组件 组成的。一个组件是 UI（用户界面）的一部分，它拥有自己的逻辑和外观。组件可以小到一个按钮，也可以大到整个页面。

React 组件是返回标签的 JavaScript 函数：

在react里面，我们主要使用的语言就是jsx和tsx，jsx和tsx比较于js和ts最直观的区别就是，我们可以在javascript部分手搓dom的代码。

举个例子 在function中编写了一个button。

以这个例子，我们要知道，在js中写dom的方式是 return （），在（）里面写dom，如果编写的dom只有一行，则可以在return后面 空格紧跟 不用括号包起来，但是仅限于只有一行代码的情况，如果有多行或者换行如下例子这种，必须包在括号里面

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

创建好了一个组件，那么就需要嵌套组件，嵌套组件注意：第一，组件名首字母大写，因为react会把小写辨识成标签例如div，MyButton则识别成组件，所以React 组件必须以大写字母开头，而 HTML 标签则必须是小写字母。第二，使用了es6的导出语法在外组件的时候。

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

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

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

这里补充一个知识点，因为react大部分时候都会使用jsx或者tsx进行开发，使用它们的原因是因为他方便，并且严格，方便是可以在js中写dom和js代码，严格是必须用闭合标签，并且你的组件也不能返回多个 JSX 标签。你必须将它们包裹到一个共享的父级中，比如 <div>...</div> 或使用空的 <>...</> 包裹：

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

如何添加标签和样式：

react中添加样式和普通添加样式不同在于，关键字使用的是className而不是class

<div className="divName">这是一个标签</div>

react 显示数据 一个花括号即可

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

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

你也可以把更为复杂的表达式放入 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中条件渲染与vue有鲜明的区别，vue是通过v-if或者v-xxx指令让标签显示。而react比较纯粹，他是通过if（）js的语法进行判断然后显示，也就是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>

react渲染列表，同样与vue不同，他是直接你将依赖 JavaScript 的特性，例如 for 循环 和 array 的 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 属性。对于列表中的每一个元素，你都应该传递一个字符串或者数字给 key，用于在其兄弟节点中唯一标识该元素。通常 key 来自你的数据，比如数据库中的 ID。如果你在后续插入、删除或重新排序这些项目，React 将依靠你提供的 key 来思考发生了什么。

const products = [
  { title: 'Cabbage', isFruit: false, id: 1 },
  { title: 'Garlic', isFruit: false, id: 2 },
  { title: 'Apple', 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>
  );
}

react响应事件

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

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

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

更新界面：

如果你需要页面每次通常你会希望你的组件 “记住” 一些信息并展示出来，比如一个按钮被点击的次数。要做到这一点，你需要在你的组件中添加 state。

首先，从 React 引入 useState：

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>
  );
}

React 将再次调用你的组件函数。第一次 count 变成 1。接着点击会变成 2。继续点击会逐步递增。

如果你多次渲染同一个组件，每个组件都会拥有自己的 state。你可以尝试点击不同的按钮：

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>
  );
}

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