React组件中状态更新函数属性的TypeScript定义优化

在React组件开发过程中,将useState返回的状态更新函数作为属性传递给子组件是一种常见做法。这种方法可以使状态管理逻辑更加模块化,但同时也需要确保类型安全性。

优化前的代码

tsx 复制代码
import { useState } from "react";
import type { FC } from 'react';

interface AddProps {
  onChange: (e: any) => void;
}

const Add: FC<AddProps> = ({ onChange }) => {
  return <button onClick={() => {
    onChange((data: number) => data + 1);
  }}>Click me!</button>
}

const MyComponent = () => {
  const [count, setCount] = useState(1);
  return (
    <>
      数量:{count}
      <Add onChange={setCount} />
    </>
  );
};

export default MyComponent;

优化前的问题

  • Add组件的onChange属性类型定义为(e: any) => void,其中e被定义为any类型,这种做法牺牲了类型安全。
  • 传递给onChange的是setCount函数,它既可以接收一个数字也可以接收一个函数。因此,我们需要更准确地定义e的类型。可以将 e 的类型定义为 number | ((prevState: number) => number)。但是这种定义都不便捷。

类型安全的改进

为了提高类型安全性,我们可以利用@types/react提供的Dispatch<SetStateAction>泛型类型来定义onChange属性。这个泛型类型允许我们指定状态更新函数可以接收的参数类型,使得类型定义更加严格和准确。

优化后的代码

tsx 复制代码
import { useState } from "react";
import type { FC, Dispatch, SetStateAction } from 'react';

interface AddProps {
  onChange: Dispatch<SetStateAction<number>>;
}

const Add: FC<AddProps> = ({ onChange }) => {
  return <button onClick={() => onChange(data => data + 1)}>Click me!</button>;
}

const MyComponent = () => {
  // 明确指定useState的类型参数为number
  const [count, setCount] = useState<number>(1); 
  return (
    <>
      数量:{count}
      <Add onChange={setCount} />
    </>
  );
};

export default MyComponent;

关键优化点

  • 使用Dispatch<SetStateAction<number>>来定义onChange属性的类型,这样既可以接收一个直接的数字也可以接收一个返回数字的函数,保证了类型的准确性和安全性。
  • Add组件的onClick事件处理函数中直接传递更新函数(data => data + 1)onChange,这里不需要显式指定data的类型,因为它会根据onChange的类型自动推断出来。

通过这些优化,我们不仅保证了代码的类型安全性,还使得组件间的状态管理逻辑更加清晰和易于维护。

相关推荐
IT_陈寒8 小时前
Vue 3.4性能优化实战:5个鲜为人知的Composition API技巧让打包体积减少40%
前端·人工智能·后端
前端九哥8 小时前
💻【急招!27届前端实习生】广州4399实习太幸福了!江景+三餐+健身房全都有😭
前端·面试·招聘
咖啡の猫8 小时前
Vue全局事件总线
前端·javascript·vue.js
Lovereo9 小时前
我的目标检测性能优化之路:预算不够、GPU 没有、但性能我得要
前端
蒙娜丽宁9 小时前
Rust 与 WebAssembly:构建高效前端应用的全流程复盘
前端·rust·wasm
这儿有一堆花9 小时前
使用 Actix-web 开发高性能 Web 服务
前端·数据库
豆苗学前端9 小时前
10分钟带你入门websocket,并实现一个在线多人聊天室
前端·javascript·后端
白水清风9 小时前
Vue3之渲染器
前端·vue.js·面试
刘永胜是我9 小时前
解决Volta环境下npm全局包卸载失败:一次深入排查之旅
前端·node.js
白水清风9 小时前
Vue3之组件化
前端·vue.js·面试