React + TypeScript
一、前言
在React项目开发中,写出优雅的、更有意义的typescript代码,是我们一直追求的。本文广东靓仔带小伙伴们一起来看看React项目实际开发中用到的一些常用类型示例。目录抢先看:- 基本prop类型示例
- 有用的 React Prop 类型示例
- 函数组件
- 类组件
- form和event
- Context
- forwardRef/createRef
- 有用的hooks
- HOC
- Linting
二、基本prop类型示例
常规的程序中使用的 TypeScript 类型列表:
type AppProps = {
message: string;
count: number;
disabled: boolean;
/** 一个类型的数组!*/
names: string[];
/** 用于指定精确字符串值的字符串文字,使用联合类型将它们连接在一起 */
status: "waiting" | "success";
/** 任何对象,只要你不使用它的属性(不常见,但用作占位符)*/
obj: object;
obj2: {}; // 和 `object` 差不多,和 `Object` 完全一样
/** 具有任意数量属性的对象 (PREFERRED) */
obj3: {
id: string;
title: string;
};
/** 对象数组!(常见的) */
objArr: {
id: string;
title: string;
}[];
/** 具有任意数量的相同类型属性的 dict 对象 */
dict1: {
[key: string]: MyTypeHere;
};
dict2: Record<string, MyTypeHere>; // 相当于 dict1
/** 任何函数,只要你不调用它(不推荐) */
onSomething: Function;
/** 不接受或不返回任何内容的函数(非常常见) */
onClick: () => void;
/** 带有命名props的函数(非常常见) */
onChange: (id: number) => void;
/** 接受事件的函数类型语法(非常常见) */
onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
/** 接受事件的替代函数类型语法(非常常见) */
onClick(event: React.MouseEvent<HTMLButtonElement>): void;
/** 一个可选的props(非常常见!) */
optional?: OptionalType;
};
三、有用的 React Prop 类型示例
export declare interface AppProps {
children?: React.ReactNode; // 最好,接受 React 可以渲染的所有内容
childrenElement: JSX.Element; // 单个 React 元素
style?: React.CSSProperties; // 传递样式props
onChange?: React.FormEventHandler<HTMLInputElement>; // 形成事件!泛型参数是 event.target 的类型
props: Props & React.ComponentPropsWithoutRef<"button">; // 模拟按钮元素的所有 props 并明确不转发其 ref
props2: Props & React.ComponentPropsWithRef<MyButtonWithForwardRef>; // 模拟 MyButtonForwardedRef 的所有 props 并显式转发其 ref
}
type还是interface?
这是一个有用的经验法则:在创作库或第 3 方环境类型定义时,始终用于公共 API 的定义,因为这允许使用者在缺少某些定义时通过声明合并来扩展它们。
考虑为您的 React 组件 Props 和 State 使用,以保持一致性并且因为它受到更多限制。
四、函数组件
这些可以写成普通函数,接受一个props参数并返回一个 JSX 元素。type AppProps = {
message: string;
}; /* 如果导出使用 `interface` 以便消费者可以扩展 */
// 声明函数组件的最简单方法;推断返回类型。
const App = ({ message }: AppProps) => <div>{message}</div>;
// 您可以选择注释返回类型,这样如果您不小心返回了其他类型,则会引发错误
const App = ({ message }: AppProps): JSX.Element => <div>{message}</div>;
// 你也可以内联类型声明;消除了命名props类型,但看起来重复
const App = ({ message }: { message: string }) => <div>{message}</div>;
hook
useState类型推断对于简单值非常有效:const [state, setState] = useState(false);
// `state` 被推断为布尔值
// `setState` 只接受布尔值
许多钩子都是用 null-ish 默认值初始化的,你可能想知道如何提供类型。
显式声明类型,并使用联合类型:
const [user, setUser] = useState<User | null>(null);
setUser(newUser);
如果状态在设置后不久初始化并且始终具有以下值,还可以使用类型断言:
const [user, setUser] = useState<User>({} as User);
setUser(newUser);
useReducer您可以将有区别的联合用于 reducer 操作。不要忘记定义reducer的返回类型,否则TypeScript会推断出来。
import { useReducer } from "react";
const initialState = { count: 0 };
type ACTIONTYPE =
| { type: "increment"; payload: number }
| { type: "decrement"; payload: string };
function reducer(state: typeof initialState, action: ACTIONTYPE) {
switch (action.type) {
case "increment":
return { count: state.count + action.payload };
case "decrement":
return { count: state.count - Number(action.payload) };
default:
throw new Error();
}
}
function Counter() {
const [state, dispatch] = useReducer(reducer, initialState);
return (
<>
Count: {state.count}
<button onClick={() => dispatch({ type: "decrement", payload: "5" })}>
-
</button>
<button onClick={() => dispatch({ type: "increment", payload: 5 })}>
+
</button>
</>
);
}
useEffect / useLayoutEffect
useEffect和都useLayoutEffect用于执行副作用并返回一个可选的清理函数,这意味着如果它们不处理返回值,则不需要类型。
使用 时useEffect,注意不要返回除函数 or 以外的任何东西undefined,否则 TypeScript 和 React 都会提示你。
这在使用箭头函数时可能很微妙:
function DelayedEffect(props: { timerMs: number }) {
const { timerMs } = props;
useEffect(
() =>
setTimeout(() => {
/* do stuff */
}, timerMs),
[timerMs]
);
// 反面例子!setTimeout 隐式返回一个数字
// 因为箭头函数体没有用大括号括起来
return null;
}
useRef
在 TypeScript 中,返回一个只读或可变useRef的引用,取决于您的类型参数是否完全覆盖初始值。选择一个适合您的用例。
1、DOM 元素 ref 访问 DOM 元素:仅提供元素类型作为参数,并null用作初始值。.current在这种情况下,返回的引用将具有由 React 管理的只读引用TypeScript 期望将此 ref 提供给元素的ref prop:
function Foo() {
// - 如果可能,请尽可能具体。例如,HTMLDivElement
// 比 HTMLElement 好,也比 Element 好得多。
// - 从技术上讲,这会返回 RefObject<HTMLDivElement>
const divRef = useRef<HTMLDivElement>(null);
useEffect(() => {
// 注意 ref.current 可能为空。这是意料之中的
// 有条件地渲染被引用的元素,或者你可能忘记分配它
if (!divRef.current) throw Error("divRef is not assigned");
// 现在 divRef.current 肯定是 HTMLDivElement
doSomethingWith(divRef.current);
});
// 将 ref 赋予一个元素,以便 React 可以管理它
return <div ref={divRef}>etc</div>;
}
如果确定divRef.current永远不会为空,也可以使用非空断言运算符!:
const divRef = useRef<HTMLDivElement>(null!);
// 无需检查是否为空
doSomethingWith(divRef.current);
2、可变值 ref 要具有可变值:提供您想要的类型,并确保初始值完全属于该类型:
function Foo() {
// 从技术上讲,这将返回 MutableRefObject<number | 空>
const intervalRef = useRef<number | null>(null);
// 你自己管理 ref(这就是为什么它被称为 MutableRefObject!)
useEffect(() => {
intervalRef.current = setInterval(...);
return () => clearInterval(intervalRef.current);
}, []);
// ref 不会传递给任何元素的 "ref" 属性
return <button onClick={/* clearInterval the ref */}>Cancel timer</button>;
}
自定义hook如果你在自定义 Hook 中返回一个数组,你会想要避免类型推断,因为 TypeScript 会推断一个联合类型(当你实际上想要在数组的每个位置使用不同的类型时)
import { useState } from "react";
export function useLoading() {
const [isLoading, setState] = useState(false);
const load = (aPromise: Promise<any>) => {
setState(true);
return aPromise.finally(() => setState(false));
};
return [isLoading, load] as const; // 推断 [boolean, typeof load] 而不是 (boolean | typeof load)[]
}
五、类组件
在TypeScript 中,React.Component是一个泛型类型(aka React.Component<PropType, StateType>),因此希望为它提供(可选)prop 和 state 类型参数:type MyProps = {
// 使用 `interface` 也可以
message: string;
};
type MyState = {
count: number; // 像这样
};
class App extends React.Component<MyProps, MyState> {
state: MyState = {
// 可选的第二个注解,用于更好的类型推断
count: 0,
};
render() {
return (
<div>
{this.props.message} {this.state.count}
</div>
);
}
}
Tips: 可以导出/导入/扩展这些类型/接口以供重用。类方法:像往常一样做,要记住函数的任何参数也需要输入:
class App extends React.Component<{ message: string }, { count: number }> {
state = { count: 0 };
render() {
return (
<div onClick={() => this.increment(1)}>
{this.props.message} {this.state.count}
</div>
);
}
increment = (amt: number) => {
this.setState((state) => ({
count: state.count + amt,
}));
};
}
类属性:如果需要声明类属性以供以后使用,只需将其声明为state,但无需赋值:
class App extends React.Component<{
message: string;
}> {
pointer: number; // 像这样
componentDidMount() {
this.pointer = 3;
}
render() {
return (
<div>
{this.props.message} and {this.pointer}
</div>
);
}
}
getDerivedStateFromProps
派生状态可以使用钩子来实现,这也可以帮助设置memoization。
以下是可以注释的几种方法getDerivedStateFromProps1、如果已显式键入派生状态并希望确保 from 的返回值getDerivedStateFromProps符合它。class Comp extends React.Component<Props, State> {
static getDerivedStateFromProps(
props: Props,
state: State
): Partial<State> | null {
//
}
}
2、希望函数的返回值确定的状态时。
class Comp extends React.Component<
Props,
ReturnType<typeof Comp["getDerivedStateFromProps"]>
> {
static getDerivedStateFromProps(props: Props) {}
}
3、想要具有其他状态字段和记忆的派生状态时
type CustomValue = any;
interface Props {
propA: CustomValue;
}
interface DefinedState {
otherStateField: string;
}
type State = DefinedState & ReturnType<typeof transformPropsToState>;
function transformPropsToState(props: Props) {
return {
savedPropA: props.propA, // 保存以备memoization
derivedState: props.propA,
};
}
class Comp extends React.PureComponent<Props, State> {
constructor(props: Props) {
super(props);
this.state = {
otherStateField: "123",
...transformPropsToState(props),
};
}
static getDerivedStateFromProps(props: Props, state: State) {
if (isEqual(props.propA, state.savedPropA)) return null;
return transformPropsToState(props);
}
}
六、form和event
如果需要单独定义事件处理程序,IDE 工具在这里真的很方便,因为 @type 定义带有丰富的类型。输入要查找的内容,通常自动完成功能会为您提供帮助。onChange这是表单事件的样子
type State = {
text: string;
};
class App extends React.Component<Props, State> {
state = {
text: "",
};
// 在 = 的右侧输入
onChange = (e: React.FormEvent<HTMLInputElement>): void => {
this.setState({ text: e.currentTarget.value });
};
render() {
return (
<div>
<input type="text" value={this.state.text} onChange={this.onChange} />
</div>
);
}
}
React.FormEvent<>除了使用and键入参数和返回值void,您还可以将类型应用于事件处理程序本身
// 在 = 的左侧输入
onChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
this.setState({text: e.currentTarget.value})
}
键入 onSubmit,在表单中包含不受控制的组件
如果不太关心事件的类型,可以使用 React.SyntheticEvent。
如果目标表单具有想要访问的自定义命名输入,可以使用类型断言:
<form
ref={formRef}
onSubmit={(e: React.SyntheticEvent) => {
e.preventDefault();
const target = e.target as typeof e.target & {
email: { value: string };
password: { value: string };
};
const email = target.email.value; // 类型检查!
const password = target.password.value; // 类型检查!
// ...
}}
>
<div>
<label>
Email:
<input type="email" name="email" />
</label>
</div>
<div>
<label>
Password:
<input type="password" name="password" />
</label>
</div>
<div>
<input type="submit" value="Log in" />
</div>
</form>
事件类型列表
事件类型 | 描述 |
---|---|
AnimationEvent |
CSS动画。 |
ChangeEvent | 更改和元素<input> 的值。<select> <textarea> |
ClipboardEvent | 使用复制、粘贴和剪切事件。 |
CompositionEvent | 由于用户间接输入文本而发生的事件(例如,取决于浏览器和 PC 设置,如果您想在美式键盘上键入日语,可能会出现一个带有附加字符的弹出窗口) |
DragEvent | 与指针设备(例如鼠标)的拖放交互。 |
FocusEvent | 当元素获得或失去焦点时发生的事件。 |
FormEvent | 每当表单或表单元素获得/失去焦点、更改表单元素值或提交表单时发生的事件。 |
InvalidEvent | 当输入的有效性限制失败时触发(例如<input type="number" max="10"> ,有人会插入数字 20)。 |
KeyboardEvent | 用户与键盘的交互。每个事件描述一个单一的键交互。 |
MouseEvent | 由于用户与指点设备(例如鼠标)交互而发生的事件 |
PointerEvent | 由于用户与各种设备(如鼠标、笔/触控笔、触摸屏)交互而发生的事件,这些设备也支持多点触控。除非您为旧版浏览器(IE10 或 Safari 12)开发,否则建议使用指针事件。扩展 UIEvent。 |
TouchEvent | 由于用户与触摸设备交互而发生的事件。扩展 UIEvent。 |
TransitionEvent | CSS 过渡。不完全支持浏览器。扩展 UIEvent |
UIEvent | 鼠标、触摸和指针事件的基本事件。 |
WheelEvent | 在鼠标滚轮或类似输入设备上滚动。(注意:wheel 事件不应与scroll 事件混淆) |
SyntheticEvent | 以上所有事件的基础事件。不确定事件类型时应使用 |
七、Context
基本示例import { createContext } from "react";
interface AppContextInterface {
name: string;
author: string;
url: string;
}
const AppCtx = createContext<AppContextInterface | null>(null);
// 应用程序中的提供程序
const sampleAppContext: AppContextInterface = {
name: "Using React Context in a Typescript App",
author: "thehappybug",
url: "http://www.example.com",
};
export const App = () => (
<AppCtx.Provider value={sampleAppContext}>...</AppCtx.Provider>
);
// 在你的应用中使用
import { useContext } from "react";
export const PostInfo = () => {
const appContext = useContext(AppCtx);
return (
<div>
Name: {appContext.name}, Author: {appContext.author}, Url:{" "}
{appContext.url}
</div>
);
};
扩展示例使用createContext空对象作为默认值
interface ContextState {
// 使用上下文设置你想要处理的状态类型,例如
name: string | null;
}
// 设置一个空对象为默认状态
const Context = createContext({} as ContextState);
// 像在 JavaScript 中一样设置上下文提供程序
使用createContext 和 context getters来制作 a createCtx with no ,但无需检查:
import { createContext, useContext } from "react";
const currentUserContext = createContext<string | undefined>(undefined);
function EnthusasticGreeting() {
const currentUser = useContext(currentUserContext);
return <div>HELLO {currentUser!.toUpperCase()}!</div>;
}
function App() {
return (
<currentUserContext.Provider value="Anders">
<EnthusasticGreeting />
</currentUserContext.Provider>
);
}
注意我们需要的显式类型参数,因为我们没有默认string值:
const currentUserContext = createContext<string | undefined>(undefined);
// ^^^^^^^^^^^^^^^^^^
连同非空断言告诉 TypeScript currentUser肯定会在那里:
return <div>HELLO {currentUser!.toUpperCase()}!</div>;
//
这是不幸的,因为我们知道稍后在我们的应用程序中,a Provider将填充上下文。
有几个解决方案:
1、可以通过断言非空来解决这个问题:
const currentUserContext = createContext<string>(undefined!);
2、我们可以编写一个名为的辅助函数createCtx来防止访问Context未提供值的 a。通过这样做,API 相反,我们不必提供默认值,也不必检查:
import { createContext, useContext } from "react";
/**
* 创建上下文和提供者的助手,没有预先的默认值,并且
* 无需一直检查未定义。
*/
function createCtx<A extends {} | null>() {
const ctx = createContext<A | undefined>(undefined);
function useCtx() {
const c = useContext(ctx);
if (c === undefined)
throw new Error("useCtx must be inside a Provider with a value");
return c;
}
return [useCtx, ctx.Provider] as const; // 'as const' 使 TypeScript 推断出一个元组
}
// 用法:
// 我们仍然需要指定一个类型,但没有默认值!
export const [useCurrentUserName, CurrentUserProvider] = createCtx<string>();
function EnthusasticGreeting() {
const currentUser = useCurrentUserName();
return <div>HELLO {currentUser.toUpperCase()}!</div>;
}
function App() {
return (
<CurrentUserProvider value="Anders">
<EnthusasticGreeting />
</CurrentUserProvider>
);
}
3、可以更进一步,使用createContext和context getters结合这个想法。
import { createContext, useContext } from "react";
/**
* 创建上下文和提供者的助手,没有预先的默认值,并且
* 无需一直检查未定义。
*/
function createCtx<A extends {} | null>() {
const ctx = createContext<A | undefined>(undefined);
function useCtx() {
const c = useContext(ctx);
if (c === undefined)
throw new Error("useCtx must be inside a Provider with a value");
return c;
}
return [useCtx, ctx.Provider] as const; // 'as const' 使 TypeScript 推断出一个元组
}
// 用法
export const [useCtx, SettingProvider] = createCtx<string>(); // 指定类型,但不需要预先指定值
export function App() {
const key = useCustomHook("key"); // 从钩子中获取值,必须在组件中
return (
<SettingProvider value={key}>
<Component />
</SettingProvider>
);
}
export function Component() {
const key = useCtx(); // 仍然可以在没有空检查的情况下使用!
return <div>{key}</div>;
}
4、使用createContext and useContext制作一个createCtx with unstated-like 上下文设置器:
import {
createContext,
Dispatch,
PropsWithChildren,
SetStateAction,
useState,
} from "react";
export function createCtx<A>(defaultValue: A) {
type UpdateType = Dispatch<SetStateAction<typeof defaultValue>>;
const defaultUpdate: UpdateType = () => defaultValue;
const ctx = createContext({
state: defaultValue,
update: defaultUpdate,
});
function Provider(props: PropsWithChildren<{}>) {
const [state, update] = useState(defaultValue);
return <ctx.Provider value={{ state, update }} {...props} />;
}
return [ctx, Provider] as const; // 或者,[typeof ctx, typeof Provider]
}
// 用法
import { useContext } from "react";
const [ctx, TextProvider] = createCtx("someText");
export const TextContext = ctx;
export function App() {
return (
<TextProvider>
<Component />
</TextProvider>
);
}
export function Component() {
const { state, update } = useContext(TextContext);
return (
<label>
{state}
<input type="text" onChange={(e) => update(e.target.value)} />
</label>
);
}
八、forwardRef/createRef
检查Hooks 部分的useRef.
createRef:
import { createRef, PureComponent } from "react";
class CssThemeProvider extends PureComponent<Props> {
private rootRef = createRef<HTMLDivElement>(); // 像这样
render() {
return <div ref={this.rootRef}>{this.props.children}</div>;
}
}
forwardRef:
import { forwardRef, ReactNode } from "react";
interface Props {
children?: ReactNode;
type: "submit" | "button";
}
export type Ref = HTMLButtonElement;
export const FancyButton = forwardRef<Ref, Props>((props, ref) => (
<button ref={ref} className="MyClassName" type={props.type}>
{props.children}
</button>
));
通用 forwardRefs1 - Wrapper component
type ClickableListProps<T> = {
items: T[];
onSelect: (item: T) => void;
mRef?: React.Ref<HTMLUListElement> | null;
};
export function ClickableList<T>(props: ClickableListProps<T>) {
return (
<ul ref={props.mRef}>
{props.items.map((item, i) => (
<li key={i}>
<button onClick={(el) => props.onSelect(item)}>Select</button>
{item}
</li>
))}
</ul>
);
}
2 - Redeclare forwardRef
// 重新声明 forwardRef
declare module "react" {
function forwardRef<T, P = {}>(
render: (props: P, ref: React.Ref<T>) => React.ReactElement | null
): (props: P & React.RefAttributes<T>) => React.ReactElement | null;
}
// 只需像以前一样编写组件!
import { forwardRef, ForwardedRef } from "react";
interface ClickableListProps<T> {
items: T[];
onSelect: (item: T) => void;
}
function ClickableListInner<T>(
props: ClickableListProps<T>,
ref: ForwardedRef<HTMLUListElement>
) {
return (
<ul ref={ref}>
{props.items.map((item, i) => (
<li key={i}>
<button onClick={(el) => props.onSelect(item)}>Select</button>
{item}
</li>
))}
</ul>
);
}
export const ClickableList = forwardRef(ClickableListInner);
九、有用的hooks
useLocalStorageimport { useState } from "react";
// 用法
function App() {
// 类似于 useState 但第一个 arg 是本地存储中值的键。
const [name, setName] = useLocalStorage<string>("name", "Bob");
return (
<div>
<input
type="text"
placeholder="Enter your name"
value={name}
onChange={(e) => setName(e.target.value)}
/>
</div>
);
}
// Hook
function useLocalStorage<T>(
key: string,
initialValue: T
): [T, (value: T | ((val: T) => T)) => void] {
// 状态来存储我们的值
// 将初始状态函数传递给 useState,因此逻辑只执行一次
const [storedValue, setStoredValue] = useState<T>(() => {
try {
// 按键从本地存储中获取
const item = window.localStorage.getItem(key);
// 解析存储的 json 或者如果没有则返回 initialValue
return item ? JSON.parse(item) : initialValue;
} catch (error) {
// 如果错误也返回initialValue
console.log(error);
return initialValue;
}
});
// 返回 useState 的 setter 函数的包装版本,它...
// ... 将新值保存到 localStorage。
const setValue = (value: T | ((val: T) => T)) => {
try {
// 允许 value 是一个函数,所以我们有与 useState 相同的 API
const valueToStore =
value instanceof Function ? value(storedValue) : value;
// 保存状态
setStoredValue(valueToStore);
// 保存到本地存储
window.localStorage.setItem(key, JSON.stringify(valueToStore));
} catch (error) {
// 更高级的实现将处理错误情况
console.log(error);
}
};
return [storedValue, setValue];
}
useMedia
import { useState, useEffect } from 'react';
function App() {
const columnCount = useMedia<number>(
// 媒体查询
['(min-width: 1500px)', '(min-width: 1000px)', '(min-width: 600px)'],
// 列数(与上述按数组索引的媒体查询有关)
[5, 4, 3],
// 默认列数
2
);
// 创建列高数组(从 0 开始)
let columnHeights = new Array(columnCount).fill(0);
// 创建包含每列项目的数组数组
let columns = new Array(columnCount).fill().map(() => []) as Array<DataProps[]>;
(data as DataProps[]).forEach(item => {
// 获取最短列的索引
const shortColumnIndex = columnHeights.indexOf(Math.min(...columnHeights));
// 添加项目
columns[shortColumnIndex].push(item);
// 更新高度
columnHeights[shortColumnIndex] += item.height;
});
// 渲染列和项目
return (
<div className="App">
<div className="columns is-mobile">
{columns.map(column => (
<div className="column">
{column.map(item => (
<div
className="image-container"
style={{
// 将图像容器大小调整为图像的纵横比
paddingTop: (item.height / item.width) * 100 + '%'
}}
>
<img src={item.image} alt="" />
</div>
))}
</div>
))}
</div>
</div>
);
}
// Hook
const useMedia = <T>(queries: string[], values: T[], defaultValue: T) => {
// 包含每个查询的媒体查询列表的数组
const mediaQueryLists = queries.map(q => window.matchMedia(q));
// 根据匹配的媒体查询获取值的函数
const getValue = () => {
// 获取第一个匹配的媒体查询的索引
const index = mediaQueryLists.findIndex(mql => mql.matches);
// 返回相关值,如果没有则返回默认值
return values?.[index] || defaultValue;
};
// 匹配值的状态和设置器
const [value, setValue] = useState<T>(getValue);
useEffect(
() => {
// 事件监听回调
// 注意:通过在 useEffect 之外定义 getValue,我们确保它具有 ...
// ... 钩子参数的当前值(因为这个钩子回调在挂载时创建一次)。
const handler = () => setValue(getValue);
// 使用上述处理程序为每个媒体查询设置一个侦听器作为回调。
mediaQueryLists.forEach(mql => mql.addListener(handler));
// 在清理时移除监听器
return () => mediaQueryLists.forEach(mql => mql.removeListener(handler));
},
[] // 空数组确保效果仅在挂载和卸载时运行
);
return value;
}
useAsyncTask
// 用法
const task = useAsyncTask(async (data: any) => await myApiRequest(data));
task.run(data);
useEffect(() => {
console.log(task.status); // 'IDLE' | 'PROCESSING' | 'ERROR' | 'SUCCESS';
}, [task.status]);
// 执行
import { useCallback, useState } from "react";
type TStatus = "IDLE" | "PROCESSING" | "ERROR" | "SUCCESS";
function useAsyncTask<T extends any[], R = any>(
task: (...args: T) => Promise<R>
) {
const [status, setStatus] = useState<TStatus>("IDLE");
const [message, setMessage] = useState("");
const run = useCallback(async (...arg: T) => {
setStatus("PROCESSING");
try {
const resp: R = await task(...arg);
setStatus("SUCCESS");
return resp;
} catch (error) {
let message = error?.response?.data?.error?.message || error.message;
setMessage(message);
setStatus("ERROR");
throw error;
}
}, []);
const reset = useCallback(() => {
setMessage("");
setStatus("IDLE");
}, []);
return {
run,
status,
message,
reset,
};
}
export default useAsyncTask;
useFetch
export function useFetch(request: RequestInfo, init?: RequestInit) {
const [response, setResponse] = useState<null | Response>(null);
const [error, setError] = useState<Error | null>();
const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
const abortController = new AbortController();
setIsLoading(true);
(async () => {
try {
const response = await fetch(request, {
...init,
signal: abortController.signal,
});
setResponse(await response?.json());
setIsLoading(false);
} catch (error) {
if (isAbortError(error)) {
return;
}
setError(error as any);
setIsLoading(false);
}
})();
return () => {
abortController.abort();
};
}, [init, request]);
return { response, error, isLoading };
}
// type guards
function isAbortError(error: any): error is DOMException {
if (error && error.name === "AbortError") {
return true;
}
return false;
}
十、HOC
一个 HOC 示例
注入props
interface WithThemeProps {
primaryColor: string;
}
在组件中的使用
在组件的接口上提供可用的props,但在包装在 HoC 中时为组件的消费者减去。
interface Props extends WithThemeProps {
children?: React.ReactNode;
}
class MyButton extends React.Component<Props> {
public render() {
// 使用主题和其他props渲染元素。
}
private someInternalMethod() {
// 主题值也可在此处作为props使用。
}
}
export default withTheme(MyButton);
使用组件
现在,在使用组件时,可以省略primaryColor props或覆盖通过上下文提供的props。
<MyButton>Hello button</MyButton> // 有效
<MyButton primaryColor="#333">Hello Button</MyButton> // 同样有效
声明 HoC
实际的 HoC。
export function withTheme<T extends WithThemeProps = WithThemeProps>(
WrappedComponent: React.ComponentType<T>
) {
// 尝试为 React 开发工具创建一个不错的 displayName。
const displayName =
WrappedComponent.displayName || WrappedComponent.name || "Component";
// 创建内部组件。这里计算出来的 Props 类型是魔法发生的地方。
const ComponentWithTheme = (props: Omit<T, keyof WithThemeProps>) => {
// 获取要注入的props。这可以通过上下文来完成。
const themeProps = useTheme();
// props随后出现,因此可以覆盖默认值。
return <WrappedComponent {...themeProps} {...(props as T)} />;
};
ComponentWithTheme.displayName = `withTheme(${displayName})`;
return ComponentWithTheme;
}
这是一个更高级的动态高阶组件示例,它的一些参数基于传入的组件的 props:
// 向组件注入静态值,以便始终提供它们
export function inject<TProps, TInjectedKeys extends keyof TProps>(
Component: React.JSXElementConstructor<TProps>,
injector: Pick<TProps, TInjectedKeys>
) {
return function Injected(props: Omit<TProps, TInjectedKeys>) {
return <Component {...(props as TProps)} {...injector} />;
};
}
使用forwardRef对于“真正的”可重用性,还应该考虑为 HOC 公开一个 ref。
十一、Linting
yarn add -D @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint
将lint脚本添加到您的package.json:
"scripts": {
"lint": "eslint 'src/**/*.ts'"
},
一个合适的.eslintrc.js
module.exports = {
env: {
es6: true,
node: true,
jest: true,
},
extends: "eslint:recommended",
parser: "@typescript-eslint/parser",
plugins: ["@typescript-eslint"],
parserOptions: {
ecmaVersion: 2017,
sourceType: "module",
},
rules: {
indent: ["error", 2],
"linebreak-style": ["error", "unix"],
quotes: ["error", "single"],
"no-console": "warn",
"no-unused-vars": "off",
"@typescript-eslint/no-unused-vars": [
"error",
{ vars: "all", args: "after-used", ignoreRestSiblings: false },
],
"@typescript-eslint/explicit-function-return-type": "warn", // 考虑对对象字面量和函数返回类型使用显式注释,即使它们可以被推断出来。
"no-empty": "warn",
},
};
更多.eslintrc.json选项需要考虑,可能需要更多应用选项:
{
"extends": [
"airbnb",
"prettier",
"prettier/react",
"plugin:prettier/recommended",
"plugin:jest/recommended",
"plugin:unicorn/recommended"
],
"plugins": ["prettier", "jest", "unicorn"],
"parserOptions": {
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"env": {
"es6": true,
"browser": true,
"jest": true
},
"settings": {
"import/resolver": {
"node": {
"extensions": [".js", ".jsx", ".ts", ".tsx"]
}
}
},
"overrides": [
{
"files": ["**/*.ts", "**/*.tsx"],
"parser": "typescript-eslint-parser",
"rules": {
"no-undef": "off"
}
}
]
}
面试题库推荐
百度某部门面试原题 某中型公司面试原题
【精品】前端知识梳理
十二、最后
在我们阅读完官方文档后,我们一定会进行更深层次的学习,比如看下框架底层是如何运行的,以及源码的阅读。 这里广东靓仔给下一些小建议:- 在看源码前,我们先去官方文档复习下框架设计理念、源码分层设计
- 阅读下框架官方开发人员写的相关文章
- 借助框架的调用栈来进行源码的阅读,通过这个执行流程,我们就完整的对源码进行了一个初步的了解
- 接下来再对源码执行过程中涉及的所有函数逻辑梳理一遍