React 学习笔记

js解构与展开语法

解构

对象解构：const {a, b, c} = foo.bar;
foo.bar 必须是一个对象。它会查找 foo.bar 对象中名为 a, b, c 的属性，并将这些属性的值分别赋给同名的 a, b, c 变量。

数组解构：const [a, b, c] = foo.bar;

展开

展开语法（…）允许一个数组、或字符串进行展开，用于需要多个值或键值对的地方。

jsx语法

JSX (JavaScript XML) 是 React 用于描述UI界面的语法扩展。它允许你在 js 代码中编写看起来像 HTML 的标签，但它实际上并不是真实的HTML，而是 js 对象，只不过作为语法糖被编译。

大写字母开头的 JSX 标签（如 <MyComponent />）表示它是一个 React 组件。这些标签会被编译为对命名变量的直接引用。

以小写字母开头的元素（如 <div> 或 <span>）代表一个 HTML 内置组件。

单文件组件

page.jsx

import Component from "./component.jsx";
export default function Home() {
  return (
    <div>
      <Component/>
    </div>
  );
}

component.jsx

export default function Component() {
    return (
        <div>
            Component
        </div>
    );
}

组件参数

组件参数类型检查

动态引入

State：组件的记忆

局部变量无法在多次渲染中持久保存。更改局部变量不会触发渲染。

在 React 中，组件特有的记忆被称为 state 。

State 变量 用于保存渲染间的数据。
State setter 函数 更新变量并触发 React 再次渲染组件。

import { useState } from 'react';
// 组件内部
const [index, setIndex] = useState(0);// 默认值为 0