使用 TypeScript 构建 React 无状态函数组件
介绍
无状态函数组件是一种将复杂架构与组件输出设计分离的绝佳方式。您可以消除不必要的复杂逻辑，并提供一个易于阅读和重复使用的简单演示组件。这为更多人打开了帮助开发的大门，使用 TypeScript 添加类型让开发变得更加容易！
如何在 TypeScript 中声明无状态函数组件
在 React 中声明无状态函数组件的一种方法是创建一个采用如下 Props 的函数：
export function Example(Props: ExampleProps) {
return (
<div />
)
}
虽然这可行，但您确实会错过一些额外的类型信息。
在 React 16.8 之前，你可以在 TypeScript 中将 React 无状态函数组件声明为 React.SFC 或 React.StatelessComponent。
export const ExampleA: React.SFC<CardProps> = (props) => {
return (
<div />
)
}
export const ExampleB: React.StatelessComponent<CardProps> = (props) => {
return (
<div />
)
}
从 16.8 开始，由于引入了Hooks ，这两种类型都已被弃用。随着 hooks 的引入，函数组件不再被视为无状态的。但这并不意味着我们不能或不应该创建无状态函数组件。就像 React 类组件一样，组件是否具有状态仍然取决于我们。
最新的 React TypeScript 定义让您可以在以下两种新的相同类型之间进行选择。
export const ExampleA: React.FC<CardProps> = (props) => {
return (
<div />
)
}
export const ExampleA: React.FunctionComponent<CardProps> = (props) => {
return (
<div />
)
}
为了不破坏现有代码，SFC 和 StatelessComponents 现在是 React.FunctionComponent 的别名。它们还会给出已弃用的警告消息。
现在，让我们利用它构建一个真正的无状态功能组件。
构建简单的卡片组件
许多 CSS 框架（如Bootstrap和Foundation ）中流行的组件是 Card 组件。它包含标题、图像和消息。在此示例中，我们将介绍如何使用 React 中的无状态函数组件构建简单卡片组件。为了使该组件更易于在其他组件中使用，我们将向属性中添加 TypeScript 定义。
以下是我们如何在 React 中使用 TypeScript 构建卡片组件。
import * as React from "react";
interface CardProps {
Title: string
Image: string
Body: string
}
export const Card: React.FC<CardProps> =
({ Title, Image, Body }) => (
<div className="card">
<div className="title">{Title}</div>
<div className="image">
<img src={Image} />
</div>
<div className="body">{Body}</div>
</div>
)
从这里开始，您可以以牺牲可读性为代价来增加额外的复杂性。例如，您可以将 Image 属性设为可选。
import * as React from "react";
interface CardProps {
Title: string
Image?: string
Body: string
}
export const Card: React.FC<CardProps> =
({ Title, Image, Body }) => (
<div className="card">
<div className="title">{Title}</div>
{Image &&
<div className="image">
<img src={Image} />
</div>
}
<div className="body">{Body}</div>
</div>
)
如果你想知道{Title, Image, Body}的作用，我强烈建议你查看解构。简而言之，它将我们传递的 CardProps 对象的值映射到具有相同名称的新变量中。这是一种避免键入Props.Title并改为写Title 的好方法。
概括
我非常赞成为每个具有状态的 React 组件创建至少一个无状态函数组件。这不仅允许您单独测试组件，而且还提高了常见组件类型的可用性。如果您在较大的团队中工作，无状态函数组件可以提高设计人员和其他开发人员使用您的代码的便利性。他们不再需要了解太多有关 React 或现代 JavaScript 的知识。
我经常使用的一种流行模式是与应用程序设计人员一起在Storybook中构建无状态功能组件。我们可以协作并快速迭代简单组件，然后我可以在其他位置将这些组件与有状态组件一起重复使用。
要了解有关 TypeScript 的更多信息，请查看TypeScript 基础知识和高级 TypeScript。有关 React 的更多信息，请尝试出色的React Path，看看你的技能水平如何。
关于作者
Matt Ferderer 是一名软件开发人员，他在推特、帖子和博客上发布有关网络开发的信息。
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~