怎么在React中完美運(yùn)用

這篇文章主要講解了“怎么在React中完美運(yùn)用”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“怎么在React中完美運(yùn)用”吧！

前言

一直以來，ssh 身邊都有很多小伙伴對(duì) TS 如何在 React 中運(yùn)用有很多困惑，他們開始慢慢討厭  TS，覺得各種莫名其妙的問題降低了開發(fā)的效率。

其實(shí)如果運(yùn)用熟練的話，TS  只是在第一次開發(fā)的時(shí)候稍微多花一些時(shí)間去編寫類型，后續(xù)維護(hù)、重構(gòu)的時(shí)候就會(huì)發(fā)揮它神奇的作用了，還是非常推薦長期維護(hù)的項(xiàng)目使用它的。

其實(shí)我一直知道英文版有個(gè)不錯(cuò)的備忘錄，本來想直接推薦給小伙伴，奈何很多人對(duì)英文比較頭痛，而它中文翻譯的版本點(diǎn)進(jìn)去竟然是這個(gè)景象：

既然如此，就自己動(dòng)手。結(jié)合英文原版里的一些示例進(jìn)行一些擴(kuò)展，總結(jié)成這篇備忘錄。

前置基礎(chǔ)

閱讀本文的前提條件是：

• 熟悉 React 的使用。

• 熟悉 TypeScript 中的類型知識(shí)。

• 本文會(huì)側(cè)重使用 React Hook 作為示例，當(dāng)然大部分類型知識(shí)都是通用的。

也就是說，這篇文章側(cè)重點(diǎn)在于 「React 和 TypeScript 的結(jié)合」，而不是基礎(chǔ)知識(shí)，基礎(chǔ)知識(shí)閱讀文檔即可學(xué)習(xí)。

工具

• TypeScript Playground with React：可以在線調(diào)試 React + TypeScript，只能調(diào)試類型，并不能運(yùn)行代碼

• Stackblitz：云開發(fā)工具，可以直接運(yùn)行 React 代碼并且預(yù)覽

• Create React App TypeScript: 本地用腳手架生成 React + TS 的項(xiàng)目

選擇你覺得比較中意的調(diào)試工具即可。

組件 Props

先看幾種定義 Props 經(jīng)常用到的類型：

基礎(chǔ)類型

type BasicProps = {   message: string;   count: number;   disabled: boolean;   /** 數(shù)組類型 */   names: string[];   /** 用「聯(lián)合類型」限制為下面兩種「字符串字面量」類型 */   status: "waiting" | "success"; };

對(duì)象類型

type ObjectOrArrayProps = {   /** 如果你不需要用到具體的屬性 可以這樣模糊規(guī)定是個(gè)對(duì)象 ? 不推薦 */   obj: object;   obj2: {}; // 同上   /** 擁有具體屬性的對(duì)象類型 ? 推薦 */   obj3: {     id: string;     title: string;   };   /** 對(duì)象數(shù)組 ? 常用 */   objArr: {     id: string;     title: string;   }[];   /** key 可以為任意 string，值限制為 MyTypeHere 類型 */   dict1: {     [key: string]: MyTypeHere;   };   dict2: Record<string, MyTypeHere>; // 基本上和 dict1 相同，用了 TS 內(nèi)置的 Record 類型。 }

函數(shù)類型

type FunctionProps = {   /** 任意的函數(shù)類型 ? 不推薦 不能規(guī)定參數(shù)以及返回值類型 */   onSomething: Function;   /** 沒有參數(shù)的函數(shù) 不需要返回值 ? 常用 */   onClick: () => void;   /** 帶函數(shù)的參數(shù) ? 非常常用 */   onChange: (id: number) => void;   /** 另一種函數(shù)語法 參數(shù)是 React 的按鈕事件 ? 非常常用 */   onClick(event: React.MouseEvent<HTMLButtonElement>): void;   /** 可選參數(shù)類型 ? 非常常用 */   optional?: OptionalType; }

React 相關(guān)類型

export declare interface AppProps {   children1: JSX.Element; // ? 不推薦 沒有考慮數(shù)組   children2: JSX.Element | JSX.Element[]; // ? 不推薦 沒有考慮字符串 children   children4: React.ReactChild[]; // 稍微好點(diǎn) 但是沒考慮 null   children: React.ReactNode; // ? 包含所有 children 情況   functionChildren: (name: string) => React.ReactNode; // ? 返回 React 節(jié)點(diǎn)的函數(shù)   style?: React.CSSProperties; // ? 推薦 在內(nèi)聯(lián) style 時(shí)使用   // ? 推薦原生 button 標(biāo)簽自帶的所有 props 類型   // 也可以在泛型的位置傳入組件 提取組件的 Props 類型   props: React.ComponentProps<"button">;   // ? 推薦 利用上一步的做法 再進(jìn)一步的提取出原生的 onClick 函數(shù)類型    // 此時(shí)函數(shù)的第一個(gè)參數(shù)會(huì)自動(dòng)推斷為 React 的點(diǎn)擊事件類型   onClickButton：React.ComponentProps<"button">["onClick"] }

函數(shù)式組件

最簡單的：

interface AppProps = { message: string };  const App = ({ message }: AppProps) => <div>{message}</div>;

包含 children 的：

利用 React.FC 內(nèi)置類型的話，不光會(huì)包含你定義的 AppProps 還會(huì)自動(dòng)加上一個(gè) children 類型，以及其他組件上會(huì)出現(xiàn)的類型：

// 等同于 AppProps & {    children: React.ReactNode    propTypes?: WeakValidationMap<P>;   contextTypes?: ValidationMap<any>;   defaultProps?: Partial<P>;   displayName?: string; }  // 使用 interface AppProps = { message: string };  const App: React.FC<AppProps> = ({ message, children }) => {   return (     <>      {children}      <div>{message}</div>     </>   ) };

Hooks

@types/react 包在 16.8 以上的版本開始對(duì) Hooks 的支持。

useState

如果你的默認(rèn)值已經(jīng)可以說明類型，那么不用手動(dòng)聲明類型，交給 TS 自動(dòng)推斷即可：

// val: boolean const [val, toggle] = React.useState(false);  toggle(false) toggle(true)

如果初始值是 null 或 undefined，那就要通過泛型手動(dòng)傳入你期望的類型。

const [user, setUser] = React.useState<IUser | null>(null);  // later... setUser(newUser);

這樣也可以保證在你直接訪問 user 上的屬性時(shí)，提示你它有可能是 null。

通過 optional-chaining 語法(TS 3.7 以上支持)，可以避免這個(gè)錯(cuò)誤。

// ? ok const name = user?.name

useReducer

需要用 Discriminated Unions 來標(biāo)注 Action 的類型。

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] = React.useReducer(reducer, initialState);   return (     <>       Count: {state.count}       <button onClick={() => dispatch({ type: "decrement", payload: "5" })}>         -       </button>       <button onClick={() => dispatch({ type: "increment", payload: 5 })}>         +       </button>     </>   ); }

「Discriminated Unions」一般是一個(gè)聯(lián)合類型，其中每一個(gè)類型都需要通過類似 type 這種特定的字段來區(qū)分，當(dāng)你傳入特定的 type  時(shí)，剩下的類型 payload 就會(huì)自動(dòng)匹配推斷。

這樣：

• 當(dāng)你寫入的 type 匹配到 decrement 的時(shí)候，TS 會(huì)自動(dòng)推斷出相應(yīng)的 payload 應(yīng)該是 string 類型。

• 當(dāng)你寫入的 type 匹配到 increment 的時(shí)候，則 payload 應(yīng)該是 number 類型。

這樣在你 dispatch 的時(shí)候，輸入對(duì)應(yīng)的 type，就自動(dòng)提示你剩余的參數(shù)類型啦。

useEffect

這里主要需要注意的是，useEffect 傳入的函數(shù)，它的返回值要么是一個(gè)方法(清理函數(shù))，要么就是undefined，其他情況都會(huì)報(bào)錯(cuò)。

比較常見的一個(gè)情況是，我們的 useEffect 需要執(zhí)行一個(gè) async 函數(shù)，比如：

// ?  // Type 'Promise<void>' provides no match  // for the signature '(): void | undefined' useEffect(async () => {   const user = await getUser()   setUser(user) }, [])

雖然沒有在 async 函數(shù)里顯式的返回值，但是 async 函數(shù)默認(rèn)會(huì)返回一個(gè) Promise，這會(huì)導(dǎo)致 TS 的報(bào)錯(cuò)。

推薦這樣改寫：

useEffect(() => {   const getUser = async () => {     const user = await getUser()     setUser(user)   }   getUser() }, [])

或者用自執(zhí)行函數(shù)?不推薦，可讀性不好。

useEffect(() => {   (async () => {     const user = await getUser()     setUser(user)   })() }, [])

useRef

這個(gè) Hook 在很多時(shí)候是沒有初始值的，這樣可以聲明返回對(duì)象中 current 屬性的類型：

const ref2 = useRef(null);

以一個(gè)按鈕場景為例：

function TextInputWithFocusButton() {   const inputEl = React.useRef<HTMLInputElement>(null);   const onButtonClick = () => {     if (inputEl && inputEl.current) {       inputEl.current.focus();     }   };   return (     <>       <input ref={inputEl} type="text" />       <button onClick={onButtonClick}>Focus the input</button>     </>   ); }

當(dāng) onButtonClick 事件觸發(fā)時(shí)，可以肯定 inputEl 也是有值的，因?yàn)榻M件是同級(jí)別渲染的，但是還是依然要做冗余的非空判斷。

有一種辦法可以繞過去。

const ref1 = useRef(null!);

null! 這種語法是非空斷言，跟在一個(gè)值后面表示你斷定它是有值的，所以在你使用 inputEl.current.focus() 的時(shí)候，TS  不會(huì)給出報(bào)錯(cuò)。

但是這種語法比較危險(xiǎn)，需要盡量減少使用。

在絕大部分情況下，inputEl.current?.focus() 是個(gè)更安全的選擇，除非這個(gè)值真的不可能為空。(比如在使用之前就賦值了)

useImperativeHandle

推薦使用一個(gè)自定義的 innerRef 來代替原生的 ref，否則要用到 forwardRef 會(huì)搞的類型很復(fù)雜。

type ListProps = {   innerRef?: React.Ref<{ scrollToTop(): void }> }  function List(props: ListProps) {   useImperativeHandle(props.innerRef, () => ({     scrollToTop() { }   }))   return null }

結(jié)合剛剛 useRef 的知識(shí)，使用是這樣的：

function Use() {   const listRef = useRef<{ scrollToTop(): void }>(null!)    useEffect(() => {     listRef.current.scrollToTop()   }, [])    return (     <List innerRef={listRef} />   ) }

很完美，是不是?

自定義 Hook

如果你想仿照 useState 的形式，返回一個(gè)數(shù)組給用戶使用，一定要記得在適當(dāng)?shù)臅r(shí)候使用 as const，標(biāo)記這個(gè)返回值是個(gè)常量，告訴 TS  數(shù)組里的值不會(huì)刪除，改變順序等等……

否則，你的每一項(xiàng)都會(huì)被推斷成是「所有類型可能性的聯(lián)合類型」，這會(huì)影響用戶使用。

export function useLoading() {   const [isLoading, setState] = React.useState(false);   const load = (aPromise: Promise<any>) => {     setState(true);     return aPromise.finally(() => setState(false));   };   // ? 加了 as const 會(huì)推斷出 [boolean, typeof load]   // ? 否則會(huì)是 (boolean | typeof load)[]   return [isLoading, load] as const;[] }

對(duì)了，如果你在用 React Hook 寫一個(gè)庫，別忘了把類型也導(dǎo)出給用戶使用。

React API

forwardRef

函數(shù)式組件默認(rèn)不可以加 ref，它不像類組件那樣有自己的實(shí)例。這個(gè) API 一般是函數(shù)式組件用來接收父組件傳來的 ref。

所以需要標(biāo)注好實(shí)例類型，也就是父組件通過 ref 可以拿到什么樣類型的值。

type Props = { }; export type Ref = HTMLButtonElement; export const FancyButton = React.forwardRef<Ref, Props>((props, ref) => (   <button ref={ref} className="MyClassName">     {props.children}   </button> ));

由于這個(gè)例子里直接把 ref 轉(zhuǎn)發(fā)給 button 了，所以直接把類型標(biāo)注為 HTMLButtonElement 即可。

父組件這樣調(diào)用，就可以拿到正確類型：

export const App = () => {   const ref = useRef<HTMLButtonElement>()   return (     <FancyButton ref={ref} />   ) }

感謝各位的閱讀，以上就是“怎么在React中完美運(yùn)用”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)怎么在React中完美運(yùn)用這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！