React 组件的基本使用，useState 状态变量的使用

React 组件

组件是什么

#####　概念：一个组件就是用户界面的一部分，它可以有自己的逻辑和外观，组件之间可以相互嵌套，也可以多次复用。

在 React，一个组件就是首字母大写的函数，内部存放了组件的逻辑和视图 UI，渲染组件只需要把组件当成标签书写即可

// 定义一个组件
function MyButton() {
  // 组件的内部逻辑和视图 UI
  return <button>Click me</button>
}

// 使用组件
function App() {
  return (
    <div>
      <MyButton />
    </div>
  )
}

##　｀useState`的基础使用

useState是React提供的Hook，可以让我们在函数组件中维护状态。

它允许我们向组件添加一个状态变量，从而控制影响组件的渲染结果。

本质：和普通 js 变量不同，状态变量一旦发生变化组件的视图UI也会跟着变化

/**
 * 项目的根组件
 *
 * useState 状态管理
 *
 * 实现一个计数器按钮
 */

import { useState } from "react";

export default function App() {
  // 1. 调用 useState 状态管理函数，创建计数器状态和更新计数器状态的函数
  const [count, setCount] = useState(0);

  // 2. 实现计数器按钮的点击事件
  const handleClick = () => {
    /**
     * 作用：1. 用传入的新值修改 count
     *       2. 重新使用新的 count 值渲染组件
     */
    setCount(count + 1);
  };

  // 3. 渲染计数器按钮和当前计数器值
  return (
    <div>
      <h1>计数器：{count}</h1>
      <button onClick={handleClick}>点击增加</button>
    </div>
  );
}

1. useState 是一个函数，返回值是一个数组。
2. 数组中的第一个参数是状态变量，第二个参数是 set 函数，用来更新状态变量。
3. useState 的参数将作为 count 的初始值。

useState 的修改状态规则

状态不可变

在 React 中，状态被认为是只读的，我们应该始终替换他而不是修改它，直接修改状态不能引发视图更新

const [count, setCount] = useState(0);

const handleClick = () => {
  // count++; // 错误，不能直接修改状态

  /**
   * 作用：
   *  1.用传入的新值修改 count
   *  2.重新使用新的 count 值渲染组件
   */
  setCount(count + 1);
}

修改对象状态

#####　规则：对于对象类型的状态变量。应该始终传给 set 函数一个新的对象来进行修改。

const [obj, setObj] = useState({ name: "张三", age: 20 });

const handleClick = () => {
  // 错误，不能直接修改对象
  // obj.name = 'Join'

  // 正确，传给 set 函数一个新的对象
  setObj({...obj, name: 'Join' });
}