Explication détaillée de l'utilisation de l'état dans React

Cette fois, je vous apporte une explication détaillée de l'utilisation de l'état dans React, et quelles sont les précautions pour l'utilisation de l'état dans React. Ce qui suit est un cas pratique, allons-y. jetez un oeil.

state

state peut être compris comme des accessoires. La différence est que les accessoires sont en lecture seule, tandis que l'état est accessible en lecture et en écriture. Lorsque l'état change, la méthode de rendu sera réexécutée pour restituer l'intégralité de l'arborescence DOM. Pendant le processus de rendu, un algorithme de comparaison sera utilisé pour calculer quels DOM ont été mis à jour, améliorant ainsi les performances.
Assurez-vous d'initialiser avant d'utiliser l'état getInitialState
Pour changer d'état, vous devez utiliser setState
getInitialState Cette méthode sera appelée une fois à chaque rendu.

//es5
var StateComponent = React.createClass({
    getInitialState: function(){
        return {
            text: ''
        }
    },
    change: function(event){
        this.setState({text: event.target.value});
    },
    render: function(){
        return (
            <p>
                <p><input type="text" onChange={this.change}/></p>
                <p>{this.state.text}</p>
            </p>
        )
    }
}) 
//es6
import React from 'react';
import ReactDOM from 'react-dom';
class Component1 extends React.Component{
    state = {
        text: ''
    }
    change(event){
        this.setState({text: event.target.value});
    },
    render(){
        return (
            <p>
                <p><input type="text" onChange={this.change}/></p>
                <p>{this.state.text}</p>
            </p>
        )
    }
}

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée des étapes pour sélectionner la mise en évidence de li dans React

Analyse des cas d'utilisation JSON et Math en JS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!