反応におけるforceupdateの使用法は何ですか

react では、forceupdate() を使用してコンポーネントに shouldComponentUpdate() をスキップさせ、直接 render() を呼び出すことで、コンポーネントの通常のライフサイクル メソッドをトリガーできます。構文は「component.forceUpdate()」です。折り返し電話）"。

このチュートリアルの動作環境: Windows 10 システム、react17.0.1 バージョン、Dell G3 コンピューター。

react でのforceupdate の使用法は何ですか

React のコンポーネントは、コンポーネントの状態またはコンポーネントに渡されたプロパティが変更された場合にのみ再レンダリングされますが、一部のデータが変更された場合は、コンポーネントの再レンダリングを変更する必要がある場合は、React の ForceUpdate() メソッドを使用します。 ForceUpdate() を呼び出すと、コンポーネントが強制的に再レン​​ダリングされるため、 shouldComponentUpdate() メソッドがスキップされ、コンポーネントの render() メソッドが呼び出されます。

ヒント: 一般に、forceUpdate() の使用は避け、render() で this.props と this.state からのみ読み取ります。

使用法:

component.forceUpdate(callback)

forceUpdate() メソッドを使用するユースケースは実際にいくつかありますが、必要に応じてフック、プロップ、状態、およびコンテキストを使用してコンポーネントを再レンダリングするのが最善です。

デフォルトでは、コンポーネントは状態またはプロパティが変更されると再レンダリングされます。 render() メソッドが他のデータに依存している場合は、forceUpdate() を呼び出して再レンダリングする必要があることを React コンポーネントに伝えることができます。

forceUpdate() を呼び出すと、コンポーネントは shouldComponentUpdate() をスキップし、render() を直接呼び出します。これにより、各子コンポーネントの shouldComponentUpdate() メソッドを含む、コンポーネントの通常のライフサイクル メソッドがトリガーされます。

forceUpdate は再レンダリングを行います。一部の変数が状態にないため、変数が更新されたときにレンダリングを更新したい場合、または状態内の変数が深すぎるため、更新時にレンダリングが自動的にトリガーされない場合。このような場合は、forceUpdate を手動で呼び出して、自動的に render をトリガーすることができます

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

推奨学習:「react ビデオ チュートリアル 」

以上が反応におけるforceupdateの使用法は何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。