快捷導(dǎo)航

淺談React組件props默認(rèn)值的設(shè)置

更新時(shí)間：2023年04月26日 09:24:50 作者：Jou24

本文主要介紹了淺談React組件props默認(rèn)值的設(shè)置，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

前言

在編寫(xiě)react組件的時(shí)候，為了兼容一些分支邏輯，我們經(jīng)常會(huì)給組件的props設(shè)置一些默認(rèn)值，但是有些默認(rèn)值的寫(xiě)法會(huì)導(dǎo)致一些潛在的問(wèn)題，比如無(wú)法推斷類(lèi)型，本文將對(duì)幾種設(shè)置默認(rèn)值的寫(xiě)法進(jìn)行分析，總結(jié)其優(yōu)劣。

解構(gòu)props時(shí)設(shè)置默認(rèn)值

interface IProps {
? name: string;
? age?: number;
}

const DefaultProps = (props: IProps) => {
? const { age = 10, name } = props;
? console.log(age + 10);  

? return <div />;
};

這種情況應(yīng)該是我們經(jīng)常會(huì)寫(xiě)的一種方式，在解構(gòu)props時(shí)對(duì)可選類(lèi)型設(shè)置默認(rèn)值，在hook組件中這種方法很簡(jiǎn)潔，但是在class組件中，凡是用到這些參數(shù)的方法，我們都需要設(shè)置一次默認(rèn)值，組件復(fù)雜度比較高的時(shí)候，這樣寫(xiě)就比較容易出錯(cuò)。

interface IProps {
? name: string;
? age?: number;
}
class DefaultProps extends Component<IProps, {}> {
? func1() {
? ? const { age = 10, name } = this.props;
? ? //...
? }

? func2() {
? ? const { age = 10, name } = this.props;
? ? //...
? }  

? render() {
? ? return <div />;
? }
}

所以解構(gòu)時(shí)設(shè)置默認(rèn)值推薦在hook組件中使用，不推薦在class組件中使用

使用defaultProps

React的組件有一個(gè)屬性defaultProps,我們可以通過(guò)這個(gè)屬性來(lái)給組件設(shè)置默認(rèn)參數(shù)。

比如類(lèi)組件

interface IProps {
? name: string;
? age?: number;
}
class DefaultProps extends Component<IProps, {}> {
? defaultProps = {
? ? age: 20,
? };  
  
  func1() {
? ? const { age, name } = this.props;
? }

? func2() {
? ? const { age, name } = this.props;
? }

? render() {
? ? const { age, name } = this.props;
    console.log(age); ?//20
? ? return <div />;
? }
}

這樣可以避免第一種類(lèi)組件設(shè)置默認(rèn)值時(shí)，需要在每個(gè)地方都單獨(dú)設(shè)置的冗余情況，但是也帶來(lái)了新的弊端，那就是即使設(shè)置了默認(rèn)值，在使用的時(shí)候也不能推斷出準(zhǔn)確的類(lèi)型，依然會(huì)提示變量有undefined的風(fēng)險(xiǎn)

圖片.png

所以，如果需要更準(zhǔn)確的類(lèi)型推斷，這里還需要對(duì)類(lèi)型進(jìn)行額外的處理.

進(jìn)行額外的類(lèi)型校驗(yàn)

因?yàn)橘x了默認(rèn)值，我們希望能得到更準(zhǔn)確的類(lèi)型推斷，所以我們可以將默認(rèn)值的類(lèi)型單獨(dú)抽離，再合并到Props的類(lèi)型中，以達(dá)到更好的類(lèi)型推斷.

interface IProps {
? name: string;
? age?: number;
}
class DefaultProps extends Component<Required<IProps>, {}> {
? defaultProps: Partial<IProps> = {
? ? age: 20,
? };
? render() {
? ? const { age } = this.props;
? ? console.log(age);
? ? return <div />;
? }
}

這里我們將所有屬性全部設(shè)置成可選，然后根據(jù)需要設(shè)置默認(rèn)值，在初始化的時(shí)候?qū)rops設(shè)置為Required這樣就能在使用時(shí)準(zhǔn)確推斷類(lèi)型。

圖片.png

值得注意的是，這里沒(méi)有檢測(cè)是否所有可選類(lèi)型都有默認(rèn)值，如果所有的可選類(lèi)型都需要默認(rèn)值，可以再加上這樣一個(gè)工具類(lèi)型，篩選出所有可選類(lèi)型。

type Filter<T> = {
? [K in keyof T as undefined extends T[K] ? K : never]: T[K];
};

于是代碼變成了

interface IProps {
? name: string;
? age?: number;
? sex?: string;
}

type Filter<T> = {
? [K in keyof T as undefined extends T[K] ? K : never]: T[K];
};

class DefaultProps extends Component<Required<IProps>, {}> {
? defaultProps: Required<Filter<IProps>> = {
? ? age: 20,
    sex:'male'
? };
? render() {
? ? const { age } = this.props;
? ? console.log(age);
? ? return <div />;
? }
}

如果不寫(xiě)的話就會(huì)提示

圖片.png