Forumdelen sponsras av

Forum Mjukvara Programmering och digitalt skapande Tråd

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

Skriv svar
1
Trädvy Permalänk
Medlem
Registrerad
Apr 2016

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}
        )  
      }
      }
●
Citera Svara
Trädvy Permalänk
Legendarisk ★
Hedersmedlem
Plats
::1
Registrerad
Dec 2002

@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

Abstractions all the way down.
●
Citera Svara
Trädvy Permalänk
Medlem
Registrerad
Apr 2016
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
●
Citera Svara
Trädvy Permalänk
Legendarisk ★
Hedersmedlem
Plats
::1
Registrerad
Dec 2002
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

Abstractions all the way down.
●
Citera Svara
Skriv svar
1
In English

Do you want to ask for a review, send us a press release or advertise? Don’t hesitate to contact the largest website about computer hardware in Sweden!

Annonsera

Vill du nå mer än 400 000 unika besökare i veckan som gillar datorer, teknik och hemelektronik? Kontakta vår mediasäljare
för mer information.

Kontakt

Tipsa redaktionen om en intressant produkt, önska ett test eller framför andra önskemål direkt till oss.

RSS

Håll dig uppdaterad med senaste nytt från SweClockers.com.

Copyright © 1999–2018 Geeks AB. Allt innehåll tillhör Geeks AB.
Citering är tillåten om källan anges.