快捷導(dǎo)航

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

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

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

前言

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

解構(gòu)props時設(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)常會寫的一種方式，在解構(gòu)props時對可選類型設(shè)置默認(rèn)值，在hook組件中這種方法很簡潔，但是在class組件中，凡是用到這些參數(shù)的方法，我們都需要設(shè)置一次默認(rèn)值，組件復(fù)雜度比較高的時候，這樣寫就比較容易出錯。

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è)置默認(rèn)值推薦在hook組件中使用，不推薦在class組件中使用

使用defaultProps

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

比如類組件

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 />;
? }
}

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

圖片.png

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

進行額外的類型校驗

因為賦了默認(rèn)值，我們希望能得到更準(zhǔn)確的類型推斷，所以我們可以將默認(rèn)值的類型單獨抽離，再合并到Props的類型中，以達到更好的類型推斷.

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)值，在初始化的時候?qū)rops設(shè)置為Required這樣就能在使用時準(zhǔn)確推斷類型。

圖片.png

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

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 />;
? }
}

如果不寫的話就會提示

圖片.png