两年React老兵的总结 - 类型检查篇

scola666 发布于2019-08-23 18:38 / 3150人阅读

摘要：系列引言最近准备培训新人为了方便新人较快入手开发并编写高质量的组件代码我根据自己的实践经验对组件设计的相关实践和规范整理了一些文档将部分章节分享了出来由于经验有限文章可能会有某些错误希望大家指出互相交流由于篇幅太长所以拆分为几篇文章主要有以

系列引言

最近准备培训新人, 为了方便新人较快入手 React 开发并编写高质量的组件代码, 我根据自己的实践经验对React 组件设计的相关实践和规范整理了一些文档, 将部分章节分享了出来. 由于经验有限, 文章可能会有某些错误, 希望大家指出, 互相交流.

由于篇幅太长, 所以拆分为几篇文章. 主要有以下几个主题:

01 类型检查

02 组件的组织

[03 样式的管理]()

[04 组件的思维]()

[05 状态管理]()

文章首发于掘金平台专栏

类型检查

静态类型检查对于当今的前端项目越来越不可或缺, 尤其是大型项目. 它可以在开发时就避免许多类型问题, 减少低级错误的; 另外通过类型智能提示, 可以提高编码的效率; 有利于书写自描述的代码(类型即文档); 方便代码重构(配合 IDE 可以自动重构). 对于静态类型检查的好处这里就不予赘述, 读者可以查看这个回答flow.js/typescript 这类定义参数类型的意义何在？.

Javascript 的类型检查器主要有Typescript和Flow, 笔者两者都用过, Typescript 更强大一些, 可以避免很多坑, 有更好的生态(例如第三方库类型声明), 而且 VSCode 内置支持. 而对于 Flow, 连 Facebook 自己的开源项目(如 Yarn, Jest)都抛弃了它, 所以不建议入坑. 所以本篇文章使用 Typescript(v3.3) 对 React 组件进行类型检查声明

建议通过官方文档来学习 Typescript. 笔者此前也整理了 Typescript 相关的思维导图(mindnode)

当然 Flow 也有某些 Typescript 没有的特性: typescript-vs-flowtype

React 组件类型检查依赖于@types/react和@types/react-dom

直接上手使用试用

系列引言

类型检查

1. 函数组件

1️⃣ 使用ComponentNameProps 形式命名 Props 类型, 并导出

2️⃣ 优先使用FC类型来声明函数组件

3️⃣ 不要直接使用export default导出组件.

4️⃣ 默认 props 声明

5️⃣ 泛型函数组件

6️⃣ 子组件声明

7️⃣ Forwarding Refs

8️⃣ 配合高阶组件使用

2. 类组件

1️⃣ 继承 Component 或 PureComponent

2️⃣ 使用static defaultProps定义默认 props

3️⃣ 子组件声明

4️⃣ 泛型

3. 高阶组件

4. Render Props

5. Context

6. 杂项

1️⃣ 使用handleEvent命名事件处理器.

2️⃣ 内置事件处理器的类型

3️⃣ 自定义组件暴露事件处理器类型

4️⃣ 获取原生元素 props 定义

5️⃣ 不要使用 PropTypes

6️⃣ styled-components

7️⃣ 为没有提供 Typescript 声明文件的第三方库自定义模块声明

8️⃣ 为文档生成做好准备

9️⃣ 开启 strict 模式

扩展资料

1. 函数组件

React Hooks 出现后, 函数组件有了更多出镜率. 由于函数组件只是普通函数, 它非常容易进行类型声明

1️⃣ 使用ComponentNameProps 形式命名 Props 类型, 并导出

2️⃣ 优先使用FC类型来声明函数组件

FC是FunctionComponent的简写, 这个类型定义了默认的 props(如 children)以及一些静态属性(如 defaultProps)

import React, { FC } from "react";

/**
 * 声明Props类型
 */
export interface MyComponentProps {
  className?: string;
  style?: React.CSSProperties;
}

export const MyComponent: FC = props => {
  return hello react;
};

你也可以直接使用普通函数来进行组件声明, 下文会看到这种形式更加灵活:

export interface MyComponentProps {
  className?: string;
  style?: React.CSSProperties;
  // 手动声明children
  children?: React.ReactNode;
}

export function MyComponent(props: MyComponentProps) {
  return hello react;
}

3️⃣ 不要直接使用export default导出组件.

这种方式导出的组件在React Inspector查看时会显示为Unknown

export default (props: {}) => {
  return hello react;
};

如果非得这么做, 请使用命名 function 定义:

export default function Foo(props: {}) {
  return xxx;
}

4️⃣ 默认 props 声明

实际上截止目前对于上面的使用FC类型声明的函数组件并不能完美支持 defaultProps:

import React, { FC } from "react";

export interface HelloProps {
  name: string;
}

export const Hello: FC = ({ name }) => Hello {name}!;

Hello.defaultProps = { name: "TJ" };

// ❌! missing name
;

笔者一般喜欢这样子声明默认 props:

export interface HelloProps {
  name?: string; // 声明为可选属性
}

// 利用对象默认属性值语法
export const Hello: FC = ({ name = "TJ" }) => Hello {name}!
;

如果非得使用 defaultProps, 可以这样子声明

私有云混合云静态类型检查 js检查数据类型 java怎么检查类型检查 ssl证书类型

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/105586.html

两年React老兵的总结 - 如何组织React项目

摘要：一个复杂的应用都是由简单的应用发展而来的随着越来越多的功能加入项目代码就会变得越来越难以控制本文章主要探讨在大型项目中如何对组件进行组织让项目具备可维护性系列目录类型检查组件的组织样式的管理组件的思维状态管理目录组件设计的基本原则基本原则高一个复杂的应用都是由简单的应用发展而来的, 随着越来越多的功能加入项目, 代码就会变得越来越难以控制. 本文章主要探讨在大型项目中如何对组件进行组...

hoohack 2019-08-23 18:40 评论0 收藏0
前端周刊第62期：学习学习再学习

摘要：腾讯前端技术大会和全球技术领导力峰会都于上周闭幕，我翻看了下讲稿，有价值的参考还是不少。腾讯前端大会下载腾讯前端大会是由腾讯主办，广邀国内外的前端大牛，有著名流行框架的作者知名前端书籍的作者工程化方面的权威等。 showImg(https://segmentfault.com/img/bVQk0r?w=757&h=427); 共 2462 字，读完需 4 分钟。腾讯前端技术大会（TFC...

tinylcy 2019-08-20 17:46 评论0 收藏0
前端每周清单第 34 期：Vue 现状盘点与 3.0 展望，React 代码迁移与优化，图片优化详论

摘要：工程实践立足实践，提示实际水平内联函数与性能很多关于性能优化的文章都会谈及内联函数，其也是常见的被诟病为拖慢性能表现的元凶之一不过本文却是打破砂锅问到底，论证了内联函数并不一定就会拖慢性能，过度的性能优化反而会有损于应用性能。 showImg(https://segmentfault.com/img/remote/1460000011481413?w=1240&h=825); 前端每周...

CoderStudy 2019-08-21 16:56 评论0 收藏0
前端周刊第60期：用空格缩进的程序员挣得更多？

摘要：工作能力强的人有哪些共同特征知乎上广受关注的问题，跟每个人的成长有关。想知道我接下来会写些什么欢迎订阅我的掘金专栏或知乎专栏前端周刊让你在前端领域跟上时代的脚步。 showImg(https://segmentfault.com/img/bVPuPc?w=640&h=360); David Robinson 从 Stack Overflow 年度开发者调查中发现的结论，使用空格缩进比使...

Forest10 2019-08-20 17:23 评论0 收藏0
2017 年崛起的 JS 项目

摘要：通过对比各项目过去个月在上新增数量，来评估其在年度的受关注程度，进而选出年度领域崛起的明星项目。也许正因为上述最后一点，在中国拥有大量的拥趸。不仅被中国最大的电商平台阿里巴巴使用，也获得了与这些公司青睐。共 4741 字，读完需 8 分钟，速读 2 分钟。我有幸参与了该项目的部分中文版翻译、校对工作，感谢 Sacha Grief，Micheal Ramberu 的统计整理，以及 Fr...

gaara 2019-08-22 13:57 评论0 收藏0