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

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

相关推荐
剑亦未配妥26 分钟前
移动端触摸事件与鼠标事件的触发机制详解
前端·javascript
人工智能训练师6 小时前
Ubuntu22.04如何安装新版本的Node.js和npm
linux·运维·前端·人工智能·ubuntu·npm·node.js
Seveny076 小时前
pnpm相对于npm,yarn的优势
前端·npm·node.js
yddddddy7 小时前
css的基本知识
前端·css
昔人'7 小时前
css `lh`单位
前端·css
Nan_Shu_6149 小时前
Web前端面试题(2)
前端
知识分享小能手9 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
蚂蚁RichLab前端团队10 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
孩子 你要相信光10 小时前
css之一个元素可以同时应用多个动画效果
前端·css
huangql52011 小时前
npm 发布流程——从创建组件到发布到 npm 仓库
前端·npm·node.js