React 组件使用及规则

组件状态的基本使用

状态（state）让页面内容发生变化的数据 如果你要使用状态，可使用 useState 函数

语法： const [count, setCount] = useState(10);

count：存储状态的变量

setCount: 修改状态的函数

10： 默认值

它内部的运行流程 useState 第一次调用时，count 返回默认值，以后的每次调用展示最新的值 当修改状态后，触发组件则重新渲染

import { useState } from "react";

const App = () => {
  const [count, setCount] = useState(10);

  const addData = () => {
    // 直接在行内写会报错，在外部函数写就没有问题
    setCount(count + 1);
  };
  return (
    <div>
      <p>展示的值：{count}</p>
      <button onClick={addData}>增加+</button>
    </div>
  );
};

export default App;

修改状态的规则

规则：不要直接修改当前状态的值，应该创建新的值（状态是不可变的）

注意：如果没有遵循该规则，会导致报错或组件无法重新渲染

在修改简单类型时不要 count += 1;setCunt(count)

import { useState } from "react";

const App = () => {
  const [array, setArray] = useState(["江", "河", "湖", "海"]);
  const [obj, setObj] = useState({ id: 1, name: "张三", age: "999" });

  return (
    <div>
      <p>操作数组--- {array.join("，")}</p>
      {/* 不要使用 push 会报错 */}
      <button
        onClick={() => {
          setArray([...array, "-水流-"]);
        }}
      >
        增加
      </button>

      {/* 修改是使用 map 找到对应的值，并修改 */}
      <button
        onClick={() => {
          setArray(
            array.map((item) => {
              if (item === "河") return "-河流-";
              return item;
            })
          );
        }}
      >
        修改
      </button>

      {/* 删除用的的是 filter */}
      <button
        onClick={() => {
          setArray(array.filter((item) => item !== "海"));
        }}
      >
        删除
      </button>

      <hr />

      {/* 在修改对象时也是不能直接修改的 */}
      <p>
        操作对象----姓名:{obj.name} 年龄：{obj.age}
      </p>
      <button
        onClick={() => {
          setObj({ ...obj, age: "2000" });
        }}
      >
        修改
      </button>
    </div>
  );
};

export default App;

1