星级评价——了解useState

Underwood_172026-07-21 13:56

谈到React的状态管理，我首先会想到就是本地组件状态管理钩子useState

useState是React内置的Hook，用于组件内部本地状态，只能在函数组件/自定义Hook顶层调用

1. 基础语法

tsx 复制代码

const [state,setState] = useState(初始值)

state：用于读取状态，只能读不可以修改

setState：更新状态的函数

初始值：首次渲染的默认值，仅执行一次

2. 实例Demo

首先用vite构建工具创建一个react项目，初始化npm后，通过npm包管理器下载相关要使用的包（tailwindcss，react-icons等）接着导入useState钩子和要使用的封装好的图标组件，详细代码实现逻辑见代码注释

tsx 复制代码

import { useState } from "react";
import { FaStar } from "react-icons/fa";

//定义组件  {totalStars}解构   props父组件可传入总星数
export default function Test1({ totalStars = 5 }) {
//selectedStars表示选中状态，初始值为0   setSlectedStars表示更新它的函数
  const [selectedStars, setSelectedStars] = useState(0);
  //接收数字length，返回一个对应长度的数组
  const createArray = (length: number) => [...Array(length)];
  return (
    <div className="flex flex-col">
      <div>
        <p>
          {selectedStars}of{toatalStars}
        </p>
        {/* 通过map方法遍历totalStars渲染5颗星星 */}
        {createArray(totalStars).map((n, i) => (
          <FaStar
            key={i}
            {/*每个星星添加点击事件，返回设置选中数索引+1*/}
            onClick={() => setSelectedStars(i + 1)}
            {/*判断颜色：索引小于选中数的星星为红色，其余为灰色*/}
            color={i < selectedStars ? "red" : "gray"}
            size={32}
          />
        ))}
      </div>
      {/*点击按钮选中数+1，Math.min方法限制星星数不超过5*/}
      <button
        onClick={() => setSelectedStars(Math.min(selectedStars + 1, toatalStars))}
      >
        change
      </button>
    </div>
  );
}

效果展示：