React 掌握这几个就入门了（五）

大纲

1.如何创建和嵌套组件
2.使用 JSX 编写标签
3.如何添加样式
4.如何显示数据
5.如何渲染条件和列表
6.如何对事件做出响应并更新界面
7.如何在组件间共享数据

创建和嵌套组件

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

//函数式组件
//声明了 MyButton
function MyButton() {
  return (
    <button>I'm a button</button>
  );
}
//现在把它嵌套到另一个组件中
export default function MyApp() {
  return (
    <div>
      <h1>Welcome to my app</h1>
      <MyButton />
    </div>
  );
}

使用 JSX 编写标签

//JSX 比 HTML 更加严格。你必须闭合标签，如 <br />。
//你的组件也不能返回多个 JSX 标签。你必须将它们包裹到一个共享的父级中，
//比如 <div>...</div> 或使用空的 <>...</> 包裹：
function AboutPage() {
  return (
    <>
      <h1>About</h1>
      <p>Hello there.<br />How do you do?</p>
    </>
  );
}

添加样式

//使用 className 来指定一个 CSS 的 class。它与 HTML 的 class 属性的工作方式相同
<img className="avatar" />

//可以在一个单独的 CSS 文件中为它编写 CSS 规则
//React 并没有规定你如何添加 CSS 文件。最简单的方式是使用 HTML 的 <link> 标签。
//如果你使用了构建工具或框架，请阅读其文档来了解如何将 CSS 文件添加到你的项目中。
/* In your CSS */
.avatar {
  border-radius: 50%;
}

显示数据

return (
  <img
    className="avatar"     //引号,字符串传递
    src={user.imageUrl}    //大括号 读取 JavaScript 的 user.imageUrl 变量传递
  />
);

条件渲染

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

或者

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

或者

<div>
  {isLoggedIn && <AdminPanel />}
</div>
都可以

渲染列表

//在你的组件中，使用 map() 函数将这个数组转换为 <li> 标签构成的列表:
const listItems = products.map(product =>
  <li key={product.id}>  //记得添加key，否则更新异常
    {product.title}
  </li>
);

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

响应事件

//onClick={handleClick} 的结尾没有小括号！
//不要 调用 事件处理函数：你只需 把函数传递给事件 即可
function MyButton() {
  function handleClick() {
    alert('You clicked me!');
  }

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

更新界面数据

//从 React 引入 useState
import { useState } from 'react';

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

function MyButton() {
  //声明一个 state 变量
  //从 useState 中获得两样东西：当前的 state（count），以及用于更新它的函数（setCount）,默认初始值0
  const [count, setCount] = useState(0);
  //事件韩式调用更新
  function handleClick() {
    setCount(count + 1);
  }

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

使用 Hook

以 use 开头的函数被称为 Hook。useState 是 React 提供的一个内置 Hook。
react有很多内置的 Hook。这里列举其中一个。其他单独做一个系列讲。

Hook的意思是组件尽量写成纯函数，如果需要外部功能和副作用，就用钩子把外部代码“钩”进来。React默认提供了一些常用钩子，你也可以封装自己的钩子。所有的钩子都是为函数引入外部功能，所以React约定，钩子一律使用use前缀命名，便于识别。

//State Hook， 状态帮助组件 “记住”用户输入的信息
function ImageGallery() {
  const [index, setIndex] = useState(0);
  // ...

组件间共享数据

import { useState } from 'react';

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

  function handleClick() {
    setCount(count + 1);
  }
  // prop 传递给了组件
  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>
  );
}

以上就是一些基本知识。