Reageren Staat Uit de Grond Omhoog

0
42

Als je begint te leren Reageren, zal je geconfronteerd worden met het begrijpen van wat de staat is. Staat is enorm belangrijk in Reageren, en misschien wel een grote reden dat je hebt gekeken naar het gebruik van Reageren in de eerste plaats. Laten we eens een steek bij het begrijpen van wat de staat is en hoe het werkt.

Wat is de Staat?

Staat in Reageren, is een normaal JavaScript object dat u kunt bijhouden van een component van de gegevens. De toestand van een component kan veranderen. Een verandering in de toestand van een component is afhankelijk van de functionaliteit van de toepassing. Wijzigingen kunnen worden op basis van de reactie van de gebruiker, nieuwe berichten van de server, netwerk reactie, of wat dan ook.

Component staat geacht te zijn besloten om het onderdeel en wordt beheerd door dezelfde component. Om wijzigingen te maken aan een onderdeel van de staat, en je hebt om ze binnen de component — de initialisatie en het bijwerken van de component staat.

Klasse Componenten

Staten is alleen beschikbaar voor de onderdelen die zijn genoemd klasse componenten. De voornaamste reden waarom u wilt gebruiken een klasse componenten in de loop van hun tegenhanger, de functionele componenten, is dat klasse componenten kunnen hebben van state. Laten we het verschil zien. Functionele componenten JavaScript-functies, zoals dit:

const App = (rekwisieten) => {
return (
<div>
{ dit.props }
</div>
)
}

Als de functionaliteit die u nodig heeft van uw component is zo simpel als hierboven, dan een functionele component is de perfecte pasvorm. Een klasse component zal er een stuk complexer is dan dat.

klasse App breidt Reageren.Onderdeel {
constructor(rekwisieten) {
super(props)
deze.staat = { username: ‘johndoe’ }
}
render() {
const { username } = dit.staat
return(
<div>
{ username }
</div>
)
}
}

Hierboven, ik ben het instellen van de staat van het onderdeel is de gebruikersnaam om in een tekenreeks.

De Constructor

Volgens de officiële documentatie van de constructeur is de juiste plaats om te initialiseren staat. Het initialiseren van state is gedaan door het instellen van deze.staat een object, zoals u hierboven kunt zien. Vergeet niet: de staat is een normaal JavaScript-object. De initiële toestand van de App component is ingesteld op een object land die de sleutel bevat gebruikersnaam en de waarde johndoe met behulp van deze.staat = { username: ‘johndoe’ }.

Het initialiseren van een component staat kan zo complex als wat je hier kunt zien:

constructor(rekwisieten) {
super(props)
deze.staat = {
huidigetijd: 0,
status: false,
btnOne: false,
todoList: [],
naam: ‘John Doe’
}
}

Toegang Tot State

Een geïnitialiseerd staat kan worden geraadpleegd in de render () – methode, zoals ik hierboven deed.

render() {
const { username } = dit.staat
return(
<div>
{ username }
</div>
)
}

Een alternatief voor het bovenstaande fragment is:

render() {
return(
<div>
{ dit.staat.gebruikersnaam }
</div>
)
}

Het verschil is dat ik gewonnen de gebruikersnaam van state in het eerste voorbeeld, maar het kan ook geschreven worden als const status = dit.staat.gebruikersnaam. Dankzij de ES6 destructuring, ik heb niet te gaan die weg. Raak niet verward als je ziet dingen zoals dit. Het is belangrijk om te weten dat ik niet de overheveling van een staat toen ik dat deed. De initiële setup van state werd gedaan in de constructor, en mag niet opnieuw worden gedaan – nooit update van uw component staat direct.

Een staat kan worden benaderd met behulp van deze.staat.property-name. Vergeet niet dat afgezien van het punt waar u de geïnitialiseerd uw staat, de volgende keer dat u hiervan gebruik gaan maken.staat is als u toegang wilt tot de staat.

Bijwerken Staat

De enige toegestane manier om de update van een component staat is met behulp van setState(). Laten we eens kijken hoe dit werkt praktisch.

Eerst zal ik beginnen met het maken van de methode die wordt aangeroepen voor het bijwerken van de component gebruikersnaam. Deze methode moet het ontvangen van een argument, en de verwachting is dat het gebruik dat argument voor het bijwerken van de staat.

handleInputChange(gebruikersnaam) {
deze.setState({username})
}

Nogmaals, je kan zien dat ik terug ben in een object setState(). Met dat gedaan, ik zal het nodig is om te slagen in deze functie aan de gebeurtenis-handler die wordt aangeroepen wanneer de waarde van een input box is veranderd. De gebeurtenis-handler geeft de context van de gebeurtenis die de aanleiding die het mogelijk maakt om het verkrijgen van de waarde die is ingevoerd in het invoervak met behulp van event.doel.waarde. Dit is het argument doorgegeven aan handleInputChange() methode. Dus, de render methode uit moet komen te zien.

render() {
const { username } = dit.staat
return (
<div>
<div>
<input
type=”text”
waarde={dit.staat.gebruikersnaam}
onChange={event => dit.handleInputChange(event.doel.waarde)}
/>
</div>
<p>Uw gebruikersnaam, {username}</p>
</div>
)
}

Elke keer setState() wordt aangeroepen, wordt een aanmeldingsverzoek gestuurd om te Reageren op de update van de DOM met de nieuwe update staat. Met deze mentaliteit maakt u begrijpt dat staat update kan worden vertraagd.

Het onderdeel ziet er als volgt uit;

klasse App breidt Reageren.Onderdeel {
constructor(rekwisieten) {
super(props)
deze.staat = { username: ‘johndoe’ }
}
handleInputChange(gebruikersnaam) {
deze.setState({username})
}
render() {
const { username } = dit.staat
return (
<div>
<div>
<input
type=”text”
waarde={dit.staat.gebruikersnaam}
onChange={event => dit.handleInputChange(event.doel.waarde)}
/>
</div>
<p>Uw gebruikersnaam, {username}</p>
</div>
)
}
}

Het passeren van de Staat als Rekwisieten

Een staat kan worden doorgegeven als rekwisieten van een ouder om het kind component. Om dit te zien in actie, we maken een nieuwe onderdeel voor het maken van een To Do-Lijst. Dit onderdeel zal een invoerveld in te voeren van de dagelijkse taken en de taken zullen worden doorgegeven als rekwisieten voor het kind component.

Proberen te maken van de ouder-component op uw eigen, met de lessen die je hebt geleerd tot nu toe.

Laten we beginnen met het maken van de initiële toestand van de component.

klasse App breidt Reageren.Onderdeel {
constructor(rekwisieten) {
super(props)
deze.staat = { todoList: [] }
}
render() {
return()
}
}

Het onderdeel staat zijn todoList is ingesteld op een lege array. In de render () – methode, ik wil terug een formulier voor het indienen van taken.

render() {
const { todoList } = dit.staat
return (
<div>
<h2>Geef je to-do</h2>
<form onSubmit={dit.handleSubmit}>
<label>Todo Item</label>
<input
type=”text”
name=”todoitem”
/>
<button type=”submit”>Verzenden</button>
</form>
</div >
)
}

Elke keer als er een nieuw item is ingevoerd en op de knop verzenden wordt geklikt, wordt de methode handleSubmit wordt genoemd. Deze methode zal worden gebruikt voor het bijwerken van de staat van het onderdeel. De manier waarop ik wil om te werken is door gebruik te concat om de nieuwe waarde in de todoList-array. Hierdoor zal de waarde voor todoList in de setState() methode. Hier is hoe dat eruit moeten zien:

handleSubmit = (gebeurtenis) => {
evenement.preventDefault()
const value = (event.doel.elementen.todoitem.waarde)
deze.setState(({todoList}) => ({
todoList: todoList.concat(waarde)
}))
}

Het evenement context is verkregen elke keer dat de knop verzenden wordt geklikt. We gebruiken evenement.preventDefault() om te stoppen met de standaard actie van indiening, die zou reload de pagina. De waarde die is ingevoerd in het invoerveld wordt toegewezen aan een variabele met de naam waarde, die vervolgens wordt doorgegeven een argument wanneer todoList.concat() wordt aangeroepen. Reageren op updates van de status van todoList door het toevoegen van de nieuwe waarde naar de eerste lege array. Dit new array wordt de huidige stand van todoList. Wanneer een item wordt toegevoegd, wordt de cyclus herhaald.

Het doel hier is om voorbij het individuele item naar een kind component als rekwisieten. Voor deze tutorial, wij noemen het de TodoItem component. Voeg de onderstaande code binnen de bovenliggende div, die u in de render () – methode.

<div>
<h2>Uw todo-lijsten zijn:</h2>
{ todoList.kaart(i => <TodoItem item={i} /> )}
</div>

U bent met behulp van de kaart voor het doorlopen van de todoList matrix, wat betekent dat het item wordt vervolgens doorgegeven aan de TodoItem component als rekwisieten. Om gebruik te maken van dit, moet u een TodoItem onderdeel voor ontvangst van rekwisieten en maakt het op de DOM. Ik zal u tonen hoe om dit te doen met functionele en klasse componenten.

Het is geschreven als een functioneel onderdeel:

const TodoItem = (rekwisieten) => {
return (
<div>
{rekwisieten.item}
</div>
)
}

Voor de klasse component, het zou worden:

klasse TodoItem breidt Reageren.Onderdeel {
constructor(rekwisieten) {
super(props)
}
render() {
const {item} = dit.props
return (
<div>
{item}
</div>
)
}
}

Als er geen noodzaak is voor het beheren van state in dit onderdeel, bent u beter af met behulp van functionele component.

Nivellering Naar Boven

U afhandeling staat heel vaak tijdens het ontwikkelen Reageren toepassing. Met alle gebieden die hierboven, je moet het vertrouwen hebben van de mogelijkheid om een duik in het geavanceerde gedeelte van state management in Reageren. Om dieper te graven, adviseer ik Reageren op de officiële documentatie over de Staat en de Levenscyclus als Uber ‘ s Reageren Gids Rekwisieten vs Staat.