Quelle est l'utilisation de forceupdate en réaction

Dans React, forceupdate() est utilisé pour forcer le composant à ignorer ShouldComponentUpdate() et à appeler directement render(), ce qui peut déclencher la méthode de cycle de vie normale du composant. La syntaxe est "component.forceUpdate(callback)".

L'environnement d'exploitation de ce tutoriel : système Windows 10, React version 17.0.1, ordinateur Dell G3.

À quoi sert forceupdate dans React

Un composant dans React ne sera restitué que lorsque son état ou les accessoires qui lui sont transmis changent, mais si certaines données changent, si nous devons modifier le rendu du composant, nous utilisera la méthode forceUpdate() de React. L'appel de forceUpdate() forcera le composant à effectuer un nouveau rendu, ignorant ainsi la méthode ShouldComponentUpdate() et appelant la méthode render() du composant.

Conseil : en général, évitez d'utiliser forceUpdate() et lisez uniquement this.props et this.state dans render().

Utilisation :

component.forceUpdate(callback)

Bien qu'il existe effectivement certains cas d'utilisation de la méthode forceUpdate(), il est préférable d'utiliser des hooks, des accessoires, un état et un contexte pour restituer les composants en cas de besoin.

Par défaut, les composants seront restitués lorsque leur état ou leurs accessoires changent. Si votre méthode render() dépend d'autres données, vous pouvez indiquer au composant React qu'il doit effectuer un nouveau rendu en appelant forceUpdate().

L'appel de forceUpdate() obligera le composant à ignorer ShouldComponentUpdate() et à appeler directement render(). Cela déclenchera les méthodes normales du cycle de vie du composant, y compris la méthode ShouldComponentUpdate() de chaque composant enfant.

forceUpdate est à nouveau rendu. Certaines variables ne sont pas dans l'état et vous souhaitez actualiser le rendu lorsque la variable est mise à jour ; ou une variable dans l'état est trop profonde et le rendu n'est pas automatiquement déclenché lors de la mise à jour. Dans ces moments-là, vous pouvez appeler manuellement forceUpdate pour déclencher automatiquement le rendu

Sub.js
class Sub extends React.Component{
    construcotr(){
        super();
        this.name = "yema";
    }
    refChangeName(name){
        this.name = name;
        this.forceUpdate(); 
    }
    render(){
        return (<div>{this.name}</div>);
    }
}
App.js
class App extends React.Component{
    handleClick(){
        this.subRef.refChangeName("yemafuren");
    }
    render(){
        return (<div>
            <Sub ref={(sub)=>{this.subRef = sub;}} />
            <button onClick={this.handleClick}>click</button>
        </div>);
    }
}

Apprentissage recommandé : "Tutoriel vidéo React"

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!