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的类型自动推断出来。

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

相关推荐
超级大只老咪18 分钟前
字段行居中(HTML基础语法)
前端·css·html
IT_陈寒30 分钟前
Python开发者必看!10个高效数据处理技巧让你的Pandas代码提速300%
前端·人工智能·后端
只_只1 小时前
npm install sqlite3时报错解决
前端·npm·node.js
FuckPatience1 小时前
Vue ASP.Net Core WebApi 前后端传参
前端·javascript·vue.js
数字冰雹1 小时前
图观 流渲染打包服务器
服务器·前端·github·数据可视化
JarvanMo1 小时前
Flutter:我在网上看到了一个超炫的动画边框,于是我在 Flutter 里把它实现了出来
前端
returnfalse1 小时前
前端性能优化-第三篇(JavaScript执行优化)
前端·性能优化
yuzhiboyouye1 小时前
前端架构师,是架构什么
前端·架构
全马必破三1 小时前
Buffer:Node.js 里处理二进制数据的 “小工具”
前端·node.js
web安全工具库1 小时前
Linux 高手进阶:Vim 核心模式与分屏操作详解
linux·运维·服务器·前端·数据库