快速入门

1. 创建组件

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

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

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

• 永远不要在组件中定义组件

---

• React 组件必须以大写字母开头，
• HTML 标签则必须是小写字母。

---

2. 嵌套组件

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

3. 使用 JSX

• JSX 比 HTML 更加严格。
• 你必须闭合标签，如 <br />。
• 你的组件也不能返回多个 JSX 标签。
• 你必须将它们包裹到一个共享的父级中，比如 <div>...</div> 或使用空的 <>...</> 包裹：

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

4. 添加样式

• 在 React 中，使用 className 来指定一个 CSS 的 class。

JSX

<img className="avatar" />

CSS

.avatar {
  border-radius: 50%;
}

5. 显示数据

• JSX 会让你把标签放到 JavaScript 中。
• 而大括号会让你 “回到” JavaScript 中，这样你就可以从你的代码中嵌入一些变量并展示给用户。
• 例如，这将显示 user.name：

return <h1>{user.name}</h1>
return <img className="avatar" src={user.imageUrl} />

6. 条件渲染

if else 语法

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

三元运算符

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

是否运算符

{
  isLoggedIn && <AdminPanel />
}

7. 渲染列表

const products = [
  { title: 'Cabbage', id: 1, isFruit: false },
  { title: 'Garlic', id: 2, isFruit: true },
  { title: 'Apple', id: 3, isFruit: false },
]
const listItems = products.map((product) => (
  <li
    key={product.id}
    style={{
      color: product.isFruit ? 'magenta' : 'darkgreen',
    }}>
    {product.title}
  </li>
))

function List() {
  return <>{listItems}</>
}

export default List

• 注意， <li> 有一个 key 属性。
• 对于列表中的每一个元素，你都应该传递一个字符串或者数字给 key，用于在其兄弟节点中唯一标识该元素。
• 通常 key 来自你的数据，比如数据库中的 ID。
• 如果你在后续插入、删除或重新排序这些项目，React 将依靠你提供的 key 来思考发生了什么。

8. 响应事件

function MyButton() {
  function handleClick() {
    alert('你点击了我')
  }

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

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

9. 更新界面

从 React 引入 useState,每次 useState中的变量改变时，React 会重新调用组件函数，进行更新界面。

• 你将从 useState 中获得两样东西：当前的 state（count），以及用于更新它的函数（setCount）。
• 你可以给它们起任何名字，但按照惯例会像 [something, setSomething] 这样为它们命名。
• 第一次显示按钮时，count 的值为 0，因为你把 0 传给了 useState()。
• 当你想改变 state 时，调用 setCount() 并将新的值传递给它。点击该按钮计数器将递增：
• React 将再次调用你的组件函数。第一次 count 变成 1. 接着点击会变成 2.继续点击会逐步递增。
• 如果你多次渲染同一个组件，每个组件都会拥有自己的 state

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

10. 使用 Hook

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

11. 组件间共享数据

• 你经常需要组件 共享数据并一起更新。
• 比如用户登录状态等
• 组件间共享数据处理方法有
• 1. 简单方式，将状态提高到父级组件，父组件通过 prop 传递给子组件。以下例子就是该情况。
• 2. 使用 useContext , 因为如果是全站共享数据，那么组件不可能就父子这么简单共享。
• 3. 使用第三方库如 Redux

将子组件的状态，提高到父组件以达到数据共享

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