本文共 13533 字，大约阅读时间需要 45 分钟。
最近准备培训新人, 为了方便新人较快入手 React 开发并编写高质量的组件代码, 我根据自己的实践经验对React 组件设计的相关实践和规范整理了一些文档, 将部分章节分享了出来. 由于经验有限, 文章可能会有某些错误, 希望大家指出, 互相交流.
由于篇幅太长, 所以拆分为几篇文章. 主要有以下几个主题:
静态类型检查对于当今的前端项目越来越不可或缺, 尤其是大型项目. 它可以在开发时就避免许多类型问题, 减少低级错误的; 另外通过类型智能提示, 可以提高编码的效率; 有利于书写自描述的代码(类型即文档); 方便代码重构(配合 IDE 可以自动重构). 对于静态类型检查的好处这里就不予赘述, 读者可以查看这个回答.
Javascript 的类型检查器主要有和, 笔者两者都用过, Typescript 更强大一些, 可以避免很多坑, 有更好的生态(例如第三方库类型声明), 而且 VSCode 内置支持. 而对于 Flow, 连 Facebook 自己的开源项目(如 Yarn, Jest)都抛弃了它, 所以不建议入坑. 所以本篇文章使用 Typescript(v3.3) 对 React 组件进行类型检查声明
建议通过官方文档来. 笔者此前也整理了 Typescript 相关的
当然 Flow 也有某些 Typescript 没有的特性:
React 组件类型检查依赖于
@types/react和@types/react-dom
目录
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类型声明的函数组件并:
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, 可以这样子声明 👇. Typescript 可以推断和在函数上定义的属性, 这个特性在 Typescript 开始支持.
import React, { PropsWithChildren } from 'react';export interface HelloProps { name: string;}// 直接使用函数参数声明// PropsWithChildren只是扩展了children, 完全可以自己声明// type PropsWithChildren = P & {// children?: ReactNode;// }const Hello = ({ name }: PropsWithChildren
) => Hello {name}! ;Hello.defaultProps = { name: 'TJ' };// ✅ ok! 这种方式也非常简洁, 只不过 defaultProps 的类型和组件本身的 props 没有关联性, 这会使得 defaultProps 无法得到类型约束, 所以必要时进一步显式声明 defaultProps 的类型:
Hello.defaultProps = { name: 'TJ' } as Partial ;复制代码
5️⃣ 泛型函数组件
泛型在一下列表型或容器型的组件中比较常用, 直接使用FC无法满足需求:
import React from 'react';export interface ListProps{ visible: boolean; list: T[]; renderItem: (item: T, index: number) => React.ReactNode;}export function List (props: ListProps ) { return ;}// Testfunction Test() { return ( { /*自动推断i为number类型*/ }} /> );}复制代码
6️⃣ 子组件声明
使用Parent.Child形式的 JSX 可以让节点父子关系更加直观, 它类似于一种命名空间的机制, 可以避免命名冲突. 相比ParentChild这种命名方式, Parent.Child更为优雅些. 当然也有可能让代码变得啰嗦.
import React, { PropsWithChildren } from 'react';export interface LayoutProps {}export interface LayoutHeaderProps {} // 采用ParentChildProps形式命名export interface LayoutFooterProps {}export function Layout(props: PropsWithChildren ) { return {props.children} ;}// 作为父组件的属性Layout.Header = (props: PropsWithChildren ) => { return {props.children} ;};Layout.Footer = (props: PropsWithChildren ) => { return {props.children} ;};// Test header footer ;复制代码
7️⃣ Forwarding Refs
React.forwardRef 在 16.3 新增, 可以用于转发 ref, 适用于 HOC 和函数组件.
函数组件在 16.8.4 之前是不支持 ref 的, 配合 forwardRef 和 useImperativeHandle 可以让函数组件向外暴露方法
/***************************** * MyModal.tsx ****************************/import React, { useState, useImperativeHandle, FC, useRef, useCallback } from 'react';export interface MyModalProps { title?: React.ReactNode; onOk?: () => void; onCancel?: () => void;}/** * 暴露的方法, 适用`{ComponentName}Methods`形式命名 */export interface MyModalMethods { show(): void;}export const MyModal = React.forwardRef ((props, ref) => { const [visible, setVisible] = useState(); // 初始化ref暴露的方法 useImperativeHandle(ref, () => ({ show: () => setVisible(true), })); return ... ;});/******************* * Test.tsx *******************/const Test: FC<{}> = props => { // 引用 const modal = useRef (null); const confirm = useCallback(() => { if (modal.current) { modal.current.show(); } }, []); const handleOk = useCallback(() => {}, []); return (
相比函数, 基于类的类型检查可能会更好理解(例如那些熟悉传统面向对象编程语言的开发者).
1️⃣ 继承 Component 或 PureComponent
import React from 'react';/** * 首先导出Props声明, 同样是{ComponentName}Props形式命名 */export interface CounterProps { defaultCount: number; // 可选props, 不需要?修饰}/** * 组件状态, 不需要暴露 */interface State { count: number;}/** * 类注释 * 继承React.Component, 并声明Props和State类型 */export class Counter extends React.Component { /** * 默认参数 */ public static defaultProps = { defaultCount: 0, }; /** * 初始化State */ public state = { count: this.props.defaultCount, }; /** * 声明周期方法 */ public componentDidMount() {} /** * 建议靠近componentDidMount, 资源消费和资源释放靠近在一起, 方便review */ public componentWillUnmount() {} public componentDidCatch() {} public componentDidUpdate(prevProps: CounterProps, prevState: State) {} /** * 渲染函数 */ public render() { return ( {this.state.count} ); } /** * ① 组件私有方法, 不暴露 * ② 使用类实例属性+箭头函数形式绑定this */ private increment = () => { this.setState(({ count }) => ({ count: count + 1 })); }; private decrement = () => { this.setState(({ count }) => ({ count: count - 1 })); };}复制代码
2️⃣ 使用static defaultProps定义默认 props
Typescript 开始支持对使用 defaultProps 对 JSX props 进行推断, 在 defaultProps 中定义的 props 可以不需要'?'可选操作符修饰. 代码如上 👆
3️⃣ 子组件声明
类组件可以使用静态属性形式声明子组件
export class Layout extends React.Component{ public static Header = Header; public static Footer = Footer; public render() { return {this.props.children}; }}复制代码
4️⃣ 泛型
export class Listextends React.Component > { public render() {}}复制代码
在 React Hooks 出来之前, 高阶组件是 React 的一个重要逻辑复用方式. 相比较而言高阶组件比较重, 且难以理解, 容易造成嵌套地狱(wrapper). 另外对 Typescript 类型化也不友好(以前会使用来计算导出的 props). 所以新项目还是建议使用 React Hooks.
一个简单的高阶组件:
import React, { FC } from 'react';/** * 声明注入的Props */export interface ThemeProps { primary: string; secondary: string;}/** * 给指定组件注入'主题' */export function withTheme(Component: React.ComponentType
) { /** * WithTheme 自己暴露的Props */ interface OwnProps {} /** * 高阶组件的props, 忽略ThemeProps, 外部不需要传递这些属性 */ type WithThemeProps = P & OwnProps; /** * 高阶组件 */ const WithTheme = (props: WithThemeProps) => { // 假设theme从context中获取 const fakeTheme: ThemeProps = { primary: 'red', secondary: 'blue', }; return
再重构一下: