Utilitzeu setState () correctament a React

Bloc

Utilitzeu setState () correctament a React

Utilitzeu setState () correctament a React

Utilitzant setState a Reaccionar de la manera correcta és molt important. Les dades flueixen de dalt a baix a l’arbre dels components. Si establim l’estat al component superior, es tornaran a representar tots els components fills. Establir aquest estat de manera equivocada provoca un bucle infinit entre components que trencarà la nostra aplicació.

En aquesta publicació, explorarem les maneres més segures d’establir l’estat a React.

Representació inicial

En aquesta fase, els components es carreguen per primera vegada al DOM. Vegem cada mètode si podem establir el state o no.

testimoni cake-lp

constructor

Segur d'utilitzar setState? No!

El constructor és el primer mètode de cicle de vida que es crida quan es carrega el component. Aquí és on establim els puntals inicials i l’estat del component. Per tant, té sentit que aquest sigui el lloc adequat per inicialitzar l’estat del component.

componentWillMount ()

Segur d'utilitzar setState? Sí!

A componentWillMount podem accedir a la inicial props i state això es defineix aquí al constructor. Aquí tenim la possibilitat de modificar l’estat abans de representar la IU per primera vegada.

render ()

Segur d'utilitzar setState? No!

A render, podem accedir al props i state aquí, però no podem establir l’estat aquí. En realitat, podem modificar les dades assignant les dades de props i state a una variable diferent. D’aquesta manera, tenim la possibilitat de mostrar dades al DOM segons sigui necessari. Atès que està assignat a una variable diferent, qualsevol canvi que es faci a aquesta variable no afecta l'estat ni els accessoris.

Per exemple, mireu l'exemple següent que volem mostrar el nom en majúscules a la IU. Ho podem fer trucant a _toUpperCase()_ a _this.state.name_ i assignant això a la variable anomenada name.

render() { const name = this.state.name?this.state.name.toUpperCase():''; return (

{name}

this.togglePerson()}>toggle address Change address this.changeAddress(e)}> {this.state.showPerson?:''} ); }

App.js

componentDidMount ()

Segur d'utilitzar setState? Sí!

Podem accedir props i state que es defineix al constructor i es modifica en els mètodes anteriors aquí. Podem modificar el state aquí per representar l'hora final de la IU abans de finalitzar la fase de representació inicial. Des de componentDidMount() només es produeix una vegada, és segur establir l’estat aquí.

En Acció

Si ens fixem en el resum següent, this.setState() s'utilitza per canviar el nom a componentWillMount() i componentDidMount() i el nom final es reflecteix a la pantalla. Una cosa important a tenir en compte aquí és que, com s'ha dit abans, componentDidMount() es produeix només una vegada per donar un render una segona passada. És per això que és segur utilitzar setState allà i no l’hauríem d’utilitzar a render().

import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css'; import Person from './Person' class App extends Component { constructor(props){ super(props) console.log('in the constructior') this.state = { name: 'Bhargav Bachina', age: 15, address: '2222 some street somecity ST, 77777', showPerson: true } } togglePerson() { this.setState({showPerson: !this.state.showPerson}); } changeAddress(e) { this.setState({address: e.target.value}); } // only called once before render() and we can setState() here componentWillMount() { console.log('This is called before component instance and before render() function') if(this.state.age === 15) { console.log('I am 15!!!') } this.setState({name:'I am changed in componentWillMount'}) } // only called once after render() and we can setState() here componentDidMount() { console.log('This is called after render() function') if(this.state.age === 15) { console.log('I am 15!!!') } this.setState({name:'I am changed again!!'}) } render() { console.log('this is from render()') const name = 'From render()::' + this.state.name return (

{name}

this.togglePerson()}>toggle address Change address this.changeAddress(e)}> {this.state.showPerson?:''} ); } } export default App;

setState s'utilitza a componentWillMount i componentDidMount

Proveu d'utilitzar setState() a render() i obtindreu el següent error perquè heu creat un bucle infinit:

ús de setState () a render llança un error

quant costa fer una aplicació a l'Índia

Representació quan canvien els objectes

cicle de vida del component quan canvien els accessoris

En aquesta fase, els components es tornen a representar cada vegada que es produeix un canvi en els accessoris. Vegem cada mètode si podem establir l’estat o no.

componentWillReceiveProps ()

Segur d'utilitzar setState? Sí!

Aquest mètode s’anomena sempre que es produeix un canvi en l’atrezzo. aquest mètode té un argument anomenat nextProps es pot comparar amb accessoris actuals. Aquest mètode només es produeix una vegada, de manera segura que es cridi this.setState () en aquest mètode.

shouldComponentUpdate ()

Segur d'utilitzar setState? Sí!

Aquest mètode s'anomena sempre que hi ha una actualització en els accessoris o l'estat. Aquest mètode té arguments anomenats nextProps i nextState es poden comparar amb els actuals props i currentState. podem decidir si podem tornar a representar o no retornant un valor booleà d’aquest mètode. Aquest mètode només es produeix una vegada, per tant, és segur trucar this.setState() en aquest mètode.

componentWillUpdate ()

Segur d'utilitzar setState? No!

Aquest mètode s'anomena sempre que hi ha una reproducció. Per tant, si fem servir setState() aquí es dispara la reproducció de nou que condueix a un bucle infinit. no utilitzeu mai setState() aquí.

render ()

Segur d'utilitzar setState? No!

Podem accedir als accessoris i afirmar aquí, però no el podem modificar aquí. si volem modificar alguna cosa abans de mostrar-lo al DOM, hem d'assignar-ho a una variable i fer-ho. Aquí no podem establir l’estat.

componentDidUpdate ()

Segur d'utilitzar setState? Sí, amb la condició.

Aquest mètode s'anomena sempre que hi ha una reproducció. Per tant, si fem servir setState() aquí es desencadena la reproducció de nou que condueix a un bucle infinit. Però, com M Coghlan esmentats als comentaris, podem fer representacions condicionals comparant els objectes anteriors i els següents objectes com a continuació. D’aquesta manera, podem evitar un bucle infinit.

bits / stdc ++. h
componentDidUpdate(prevProps, prevState) { if(prevProps.userStatus !== this.props.userStatus) { this.setState({userStatus: this.props.userStatus}) } }

Representació quan es modifica l'estat

cicle de vida dels components quan l'estat canvia

En aquesta fase, el mateix s'aplica aquí. L'única diferència entre és componentWillReceiveProps() que només es produeix un canvi a props.

Conclusió

Com s'ha comentat anteriorment, recordeu de no utilitzar setState a render, componentWillUpdate i componentDidUpdate que condueixen a un bucle infinit i provoquen un error.

Gràcies per llegir i codificar Happy!

#react #javascript #webdev #development #programming