学习

约 1812 字大约 6 分钟

2024-07-22

提示

首先找到 react 常见的概念
去了解、熟悉这些概念的含义

1. React 常见的概念

1. 组件

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

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

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

2. JSX

为什么使用 JSX

React 认为渲染逻辑本质上与其他 UI 逻辑内在耦合，比如，在 UI 中需要绑定处理事件、在某些时刻状态发生变化时需要通知到 UI，以及需要在 UI 中展示准备好的数据。

React 并没有采用将标记与逻辑分离到不同文件这种人为的分离方式，而是通过将二者共同存放在称之为“组件”的松散耦合单元之中，来实现关注点分离。

什么是 JSX

const element = <h1>Hello, world!</h1>

它被称为 JSX，是一个 JavaScript 的语法扩展,JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。JSX 就是用来声明 React 当中的元素。JSX 比 HTML 更加严格。你必须闭合标签

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

在 JSX 中嵌入表达式

const msg = 'Hello react!'
const el = (
    <h1>
        {msg}
    <h1>
)

为了便于阅读，我们会将 JSX 拆分为多行。同时，我们建议将内容包裹在括号中，虽然这样做不是强制要求的，但是这可以避免遇到自动插入分号陷阱。

JSX 也是一个表达式

在编译之后，JSX 表达式会被转为普通 JavaScript 函数调用，并且对其取值后得到 JavaScript 对象。

也就是说，你可以在 if 语句和 for 循环的代码块中使用 JSX，将 JSX 赋值给变量，把 JSX 当作参数传入，以及从函数中返回 JSX：

function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>
  }
  return <h1>Hello, Stranger.</h1>
}

JSX 中指定属性

你可以通过使用引号，来将属性值指定为字符串字面量：

const el = <a href='https://baidu.com'>link</a>

使用大括号，来在属性值中插入一个 JavaScript 表达式：

const href = "https://baidu.com"
const el = <a href={href}>link</a>

在属性中嵌入 JavaScript 表达式时，不要在大括号外面加上引号。你应该仅使用引号（对于字符串值）或大括号（对于表达式）中的一个，对于同一属性不能同时使用这两种符号。

注意

因为 JSX 语法上更接近 JavaScript 而不是 HTML，所以 React DOM 使用 camelCase（小驼峰命名）来定义属性的名称，而不使用 HTML 属性名称的命名约定。

例如，JSX 里的 class 变成了 className，而 tabindex 则变为 tabIndex。

3. 条件渲染

React 中的条件渲染和 JavaScript 中的一样，使用 JavaScript 运算符 if 或者条件运算符去创建元素来表现当前的状态，然后让 React 根据它们来更新 UI。

let content
if (isLogin) {
  content = <Login />
} else {
  content = <NoLogin />
}
return <div>{content}</div>

如果你喜欢更为紧凑的代码，可以使用条件 ? 运算符。与 if 不同的是，它工作于 JSX 内部：

<div>{isLogin ? <Login /> : <NoLogin />}</div>

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

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

4. 渲染列表

你将依赖 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) => {
  return <li key={product.id}>{product.title}</li>
})

return <ul>{listItems}</ul>

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

5.事件处理

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

React 事件的命名采用小驼峰式（camelCase），而不是纯小写。
使用 JSX 语法时你需要传入一个函数作为事件处理函数，而不是一个字符串。

function MyButton() {
  const handleClick = () => {
    console.log("click")
  }

  return (
    <>
      <button onClick={handleClick}>click</button>
    </>
  )
}

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

6. 更新界面

通常你会希望你的组件 “记住” 一些信息并展示出来，比如一个按钮被点击的次数。要做到这一点，你需要在你的组件中添加 state。首先，从 React 引入 useState：

import { useState } from 'react'

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

const [count,setCount] = useState(0)

你将从 useState 中获得两样东西：当前的 state（count），以及用于更新它的函数（setCount）。你可以给它们起任何名字，但按照惯例会像 [something, setSomething] 这样为它们命名。

第一次显示按钮时，count 的值为 0，因为你把 0 传给了 useState()。当你想改变 state 时，调用 setCount() 并将新的值传递给它。点击该按钮计数器将递增：

import { useState } from "react"
function MyButton() {
  const [count, setCount] = useState(0)
  const handleClick = () => {
    setCount(count + 1)
  }

  return <button onClick={handleClick}>{count}</button>
}

7. Hook

以 use 开头的函数被称为 Hook。useState 是 React 提供的一个内置 Hook。

Hook 比普通函数更为严格。你只能在你的组件（或其他 Hook）的顶层调用 Hook。如果你想在一个条件或循环中使用 useState，请提取一个新的组件并在组件内部使用它。

Hook 解决了我们五年来编写和维护成千上万的组件时遇到的各种各样看起来不相关的问题。React 需要为共享状态逻辑提供更好的原生途径。你可以使用 Hook 从组件中提取状态逻辑，使得这些逻辑可以单独测试并复用。Hook 使你在无需修改组件结构的情况下复用状态逻辑。这使得在组件间或社区内共享 Hook 变得更便捷。

Hook 使用规则

Hook 就是 JavaScript 函数，但是使用它们会有两个额外的规则：

只能在函数最外层调用 Hook。不要在循环、条件判断或者子函数中调用。
只能在 React 的函数组件中调用 Hook。不要在其他 JavaScript 函数中调用。（还有一个地方可以调用 Hook —— 就是自定义的 Hook 中，我们稍后会学习到。）

学习