一网打尽react常用hook（useState）

useState

它是一个内部用于管理状态的hook 所谓状态 就是数据产生变化

使用方法

useState接受一个参数，返回一个常量和一个函数

import { useState } from "React";
function App() {
  const [state, setState] = useState("小明");
  return (
    <>
      <div>姓名:{state}</div>
      <button onClick={() => setState("大明")}>修改姓名</button>
    </>
  );
}

• state是当前状态值
• setState函数是唯一修改状态的途径，
• setState是异步函数，为了节约资源。setState内部不能有异步任务，因为等待时间过长会影响视图渲染。并且setState内部会自带防抖功能。
• 更改状态时，不能操作状态本身，只能传入新的值进行替换！！
• useState传入的参数是状态初始值

注意事项

• 因为react内部渲染原理 你不可以在if判断语句中调用hook 如有此需求 只能用三元实现
• 必须在作用域内顶部或者自定义hook中去调用该hook
• 在严格模式下 React会两次调用初始化函数 为帮你找到以外的不纯性 这只限于开发环境

内部机制

import { useState } from "react";
export default function App() {
  const [state, setState] = useState(0);
  const handleChange = () => {
    //setState(state + 1)
    //setState(state + 1)
    //setState(state + 1)//1
    //内部自带防抖功能 React会自动把该内容合并为一行代码，如想进行类似逻辑的开发，应该给setState传递更新函数，例如下面！
    setState((state) => state + 1); //1
    setState((state) => state + 1); //2
    setState((state) => state + 1); //3
  };
  return (
    <>
      <div onClick={() => handleChange}>{state}</div>
    </>
  );
}