【 React 】useState (温故知新)

useState

在函数组件中:保存和更新状态数据

1、先看最简单的基本用法

javaScript 复制代码
function Content() {
  const [count, setCount] = useState(2);
  const fn = () => {
    setCount(count + 1)
  }
  return(
    <div>
      {count}
      <p onClick={fn}>Test</p>
    </div>
  )
}

以上是一个最简单的案例

如果想在设置完值后同步获取最新值,那该如何做?

2、一个常用获取最新值的案例

javaScript 复制代码
function Content() {
  const [count, setCount] = useState(2);

  const fn = () => {
    setCount(count + 1);
  };

  useEffect(() => {
    // 在 count 变化时执行操作
    console.log('Count updated:', count);
  }, [count]); // 仅在 count 发生变化时触发 useEffect

  return (
    <div>
      {count}
      <p onClick={fn}>Test</p>
    </div>
  );
}

在react中,更新状态是异步的,调用setCount后,不能立即获取值。

这个时候react会对状态更新做批处理

如果非的拿这个值了,通过 useEffect监听 count 的变化,模拟状态的同步更新,如上案例

总对这种实现不是很满意,一种在代码里面写了监听的既视感。

继续查资料,找到基于回调函数形式,如下:

3、基于回调函数形式获取最新值

javaScript 复制代码
function MyComponent() {
  const [count, setCount] = useState(0);

  const handleUpdateCount = () => {
    setCount((prevCount) => {
      const updatedCount = prevCount + 1;
      console.log(updatedCount); // 这里可以获取到更新后的值
      return updatedCount;
    });
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleUpdateCount}>Increment</button>
    </div>
  );
}

这样就可确保在状态更新完成后立即获取最新的值,这看上去舒服多了

甚至想着假如调用接口,可不可以也这样写:

javaScript 复制代码
const handleIncrement = () => {
  setCount((prevCount) => {
    const updatedCount = prevCount + 1;
    sendRequest(updatedCount); // 发送网络请求
    return updatedCount; // 返回新的状态值
  });
};

本想美滋滋以后就这么搞,但这种方式是不推荐的,

如果 sendRequest 是异步的,状态更新和请求是并行的,可能会导致逻辑问题。

如果请求失败,状态仍然会更新,导致数据不一致。

除非你需要处理的是同步数据,可以这样写:

javascript 复制代码
const handleIncrement = () => {
  setCount((prevCount) => {
    const updatedCount = prevCount + 1;
    
    // 同步数据处理
    processData(updatedCount); // 例如:更新本地缓存、计算衍生数据等
    
    return updatedCount; // 返回新的状态值
  });
};

4、总结

1、对于回调函数形式

  • 不建议进行网络请求等副作用操作,更适合的做法是处理与状态更新直接相关的同步数据处理
  • 如更新相关状态、处理简单的业务操作提示等

2、涉及到复杂逻辑或异步操作的场景

  • 应考虑使用 useEffect Hook 来处理

5、其它

顺手补充类组件setState

以上内容皆服务于: 今天只学一个知识点:hooks

相关推荐
姜太小白1 小时前
【前端】CSS Grid布局介绍及示例
前端·css
风继续吹..4 小时前
后台管理系统权限管理:前端实现详解
前端·vue
yuanmenglxb20044 小时前
前端工程化包管理器:从npm基础到nvm多版本管理实战
前端·前端工程化
新手小新5 小时前
C++游戏开发(2)
开发语言·前端·c++
我不吃饼干5 小时前
【TypeScript】三分钟让 Trae、Cursor 用上你自己的 MCP
前端·typescript·trae
小杨同学yx6 小时前
前端三剑客之Css---day3
前端·css
Mintopia8 小时前
🧱 用三维点亮前端宇宙:构建你自己的 Three.js 组件库
前端·javascript·three.js
故事与九8 小时前
vue3使用vue-pdf-embed实现前端PDF在线预览
前端·vue.js·pdf
Mintopia9 小时前
🚀 顶点-面碰撞检测之诗:用牛顿法追寻命运的交点
前端·javascript·计算机图形学
wb1899 小时前
企业WEB应用服务器TOMCAT
运维·前端·笔记·tomcat·云计算