Forumdelen sponsras av

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

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} ) } }

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.)

Abstractions all the way down.

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.)

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

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

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

Abstractions all the way down.