Forum Mjukvara Programmering och digitalt skapande Tråd

ReactJS) Vad är syftet med använda getDerivedStateFromProps Life Cycle API?

1
Skriv svar
Permalänk
Medlem
●

ReactJS) Vad är syftet med använda getDerivedStateFromProps Life Cycle API?

Hej
Jag läser ReactJS och jag förstår inte vad är syftet med använda getDerivedStateFromProps Life Cycle

Jag läste officiella dokument

This method exists for rare use cases where the state depends on changes in props over time.

Så jag förstår man måste använda den metod när barns komponents state har föräldrarnas props värde och state ändras när prop ändras.

typ som här

    class Parent extends React.Component{


    state={example:1};
    handleClick=()=>{this.setState({example:2)};
=    render(){
     return(
        <button onClick={this.handleClick}>Click</button>
       <Child example={this.state.example}/> 
     )
   }
}


 class Child extends React.Component{

   state={example:' '};
  getDerivedStateFromProps(nextProp){
     return(
        example:nextProp.example
     )
   }

 render(){
    return(
       {this.state.example}
    )
 }
}

Jag tror Child komponent är för komplicerat. Varför inte göra så?

     class Child extends React.Component{
        state={
           example:this.props.example 
        }

       render(){
         return(
            {this.state.example}
        )  
      }
      }
Redigera
Citera flera Citera
Permalänk
Legendarisk ★
●

@ProgrammeringElev: getDerivedStateFromProps() anropas när antingen properties från föräldern eller komponentens eget state uppdaterats, och låter dig returnera ett nytt state för underkomponenten baserat på de två värdena. Här är ett mer konkret exempel där föräldrakomponenten styr huruvida texten i ett inputfält ska vara uppercase eller inte, utan getDerivedStateFromProps() i Child.tsx så skulle inte texten ändra case när inställningen ändras i föräldern:

interface IParentProps {
}

interface IParentState {
    uppercase: boolean;
}

export class Parent extends React.Component<IParentProps, IParentState> {
    public constructor(props: IParentProps) {
        super(props);
        this.state = {
            uppercase: false,
        };
    }

    private onClickHandler(): void {
        this.setState({
            uppercase: !this.state.uppercase,
        });
    }

    public render(): React.ReactNode {
        return (
            <div>
                <Child
                    uppercase={this.state.uppercase}
                />
                <label>
                    <input
                        type="checkbox"
                        onClick={() => this.onClickHandler()}
                    />
                    <span>Uppercase</span>
                </label>
            </div>
        );
    }
}
Parent
interface IChildProps {
    uppercase: boolean;
}

interface IChildState {
    text: string;
}

export class Child extends React.Component<IChildProps, IChildState> {
    public constructor(props: IChildProps) {
        super(props);
        this.state = {
            text: "bäver",
        };
    }

    public static getDerivedStateFromProps(
        props: IChildProps,
        state: IChildState,
    ): IChildState | null {
        return {
            text: props.uppercase ?
                state.text.toUpperCase() :
                state.text.toLowerCase(),
        };
    }

    private onChangeHandler(e: React.FormEvent<HTMLInputElement>): void {
        this.setState({
            text: e.currentTarget.value,
        });
    }

    public render(): React.ReactNode {
        return (
            <input
                value={this.state.text}
                onChange={(e) => this.onChangeHandler(e)}
            />
        );
    }
}
Child

Mer information:
https://reactjs.org/blog/2018/06/07/you-probably-dont-need-de...

(Exemplet är skrivet i TypeScript, ett statiskt typat superset av JavaScript som fungerar väldigt väl tillsammans med React. Rekommenderar starkt att arbeta med det istället för JavaScript.)

Senast redigerat
Visa signatur

Abstractions all the way down.

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av Biberu:

@ProgrammeringElev: getDerivedStateFromProps() anropas när antingen properties från föräldern eller komponentens eget state uppdaterats, och låter dig returnera ett nytt state för underkomponenten baserat på de två värdena. Här är ett mer konkret exempel där föräldrakomponenten styr huruvida texten i ett inputfält ska vara uppercase eller inte, utan getDerivedStateFromProps() i Child.tsx så skulle inte texten ändra case när inställningen ändras i föräldern:

interface IParentProps {
}

interface IParentState {
    uppercase: boolean;
}

export class Parent extends React.Component<IParentProps, IParentState> {
    public constructor(props: IParentProps) {
        super(props);
        this.state = {
            uppercase: false,
        };
    }

    private onClickHandler(): void {
        this.setState({
            uppercase: !this.state.uppercase,
        });
    }

    public render(): JSX.Element {
        return (
            <div>
                <Child
                    uppercase={this.state.uppercase}
                />
                <label>
                    <input
                        type="checkbox"
                        onClick={() => this.onClickHandler()}
                    />
                    <span>Uppercase</span>
                </label>
            </div>
        );
    }
}
Parent
interface IChildProps {
    uppercase: boolean;
}

interface IChildState {
    text: string;
}

export class Child extends React.Component<IChildProps, IChildState> {
    public constructor(props: IChildProps) {
        super(props);
        this.state = {
            text: "bäver",
        };
    }

    public static getDerivedStateFromProps(
        props: IChildProps,
        state: IChildState,
    ): IChildState | null {
        return {
            text: props.uppercase ?
                state.text.toUpperCase() :
                state.text.toLowerCase(),
        };
    }

    private onChangeHandler(e: React.FormEvent<HTMLInputElement>) {
        this.setState({
            text: e.currentTarget.value,
        });
    }

    public render(): JSX.Element {
        return (
            <input
                value={this.state.text}
                onChange={(e) => this.onChangeHandler(e)}
            />
        );
    }
}
Child

Mer information:
https://reactjs.org/blog/2018/06/07/you-probably-dont-need-de...

(Exemplet är skrivet i TypeScript, ett statiskt typat superset av JavaScript som fungerar väldigt väl tillsammans med React. Rekommenderar starkt att arbeta med det istället för JavaScript.)

Gå till inlägget

Hej Jag har läst din kod och jag förstår inte riktigt.
Kan man använda interface och generic i javascript ?!?! Jag har aldrig sett sådan kod i stackoverflow/ google

Redigera
Citera flera Citera
Permalänk
Legendarisk ★
●
Skrivet av ProgrammeringElev:

Hej Jag har läst din kod och jag förstår inte riktigt.
Kan man använda interface och generic i javascript ?!?! Jag har aldrig sett sådan kod i stackoverflow/ google

Gå till inlägget

Det är TypeScript, se länken i mitt förra inlägg. Det påverkar inte hur getDerivedStateFromProps() fungerar eftersom att det är en del av React, men det är lättare att läsa och förstå vad som händer tack vare typdeklarationerna. Här är ett körbart exempel:
https://codepen.io/anon/pen/vagzzx

Senast redigerat
Visa signatur

Abstractions all the way down.

Redigera
Citera flera Citera
1
Skriv svar