1. setState() の説明1.1 データの更新setState()はデータを非同期的に更新するために使用されます setState() を複数回呼び出すことができますが、再レンダリングは 1 回だけトリガーされます。 'react' から React をインポートします 'react-dom' から ReactDOM をインポートします。 クラスOppはReact.Componentを拡張します{ 状態 = { カウント: 1, } ハンドルクリック = () => { // データを非同期に更新する this.setState({ カウント: this.state.count + 1, }) this.setState({ カウント: this.state.count + 1, }) console.log(this.state.count) // 1 } 与える() { 戻る ( <div> <h1>カウンター: {this.state.count}</h1> <button onClick={this.handleClick}>+1</button> </div> ) } } ReactDOM.render(<Opp />, document.getElementById('root')) 1.2 推奨構文setState((state, props)=>{})構文を使用する
'react' から React をインポートします 'react-dom' から ReactDOM をインポートします。 クラスOppはReact.Componentを拡張します{ 状態 = { カウント: 1, } ハンドルクリック = () => { /* // データを非同期に更新する this.setState({ カウント: this.state.count + 1, }) console.log(this.state.count) //1 this.setState({ カウント: this.state.count + 1, }) console.log(this.state.count) //1 */ // 推奨構文 this.setState((state, props) => { 戻る { カウント: 状態.count + 1, } }) this.setState((状態、プロパティ) => { console.log('2回目の呼び出し:', state) //2 戻る { カウント: 状態.count + 1, } }) console.log(this.state.count) // 3 } 与える() { 戻る ( <div> <h1>カウンター: {this.state.count}</h1> <button onClick={this.handleClick}>+1</button> </div> ) } } ReactDOM.render(<Opp />, document.getElementById('root')) 1.3 2番目のパラメータ
'react' から React をインポートします 'react-dom' から ReactDOM をインポートします。 クラスOppはReact.Componentを拡張します{ 状態 = { カウント: 1, } ハンドルクリック = () => { this.setState() は、 (状態、プロパティ) => { 戻る { カウント: 状態.count + 1, } }, // 状態が更新されて再レンダリングされた直後に実行します () => { console.log('ステータスの更新が完了しました:', this.state.count) // 2 console.log(document.getElementById('title').innerText) // カウンター: 2 document.title = '更新されたカウントは:' + this.state.count } ) console.log(this.state.count) //1 } 与える() { 戻る ( <div> <h1 id='title'>カウンター: {this.state.count}</h1> <button onClick={this.handleClick}>+1</button> </div> ) } } ReactDOM.render(<Opp />, document.getElementById('root')) 2. JSX構文変換プロセス
'react' から React をインポートします 'react-dom' から ReactDOM をインポートします。 //JSX 構文の変換プロセス// const 要素 = <h1 className='greeting'>Hello JSX</h1> 定数要素 = React.createElement( 'h1', { クラス名: 'greeting', }, 「こんにちは JSX」 ) console.log(要素) ReactDOM.render(要素、document.getElementById('root')) 3. コンポーネント更新メカニズム
4. コンポーネントのパフォーマンス最適化4.1 状態の縮小
4.2 不必要な再レンダリングを避ける
'react' から React をインポートします 'react-dom' から ReactDOM をインポートします。 クラスOppはReact.Componentを拡張します{ 状態 = { カウント: 0, } ハンドルクリック = () => { this.setState((状態) => { 戻る { カウント: this.state.count + 1, } }) } //フック関数 shouldComponentUpdate(nextProps, nextState) { // コンポーネントが再レンダリングされないように false を返します // false を返します // 最新の状態 console.log('latest state', nextState) // 更新前のステータス console.log(this.state) // trueを返すと、コンポーネントは再レンダリングされます。trueを返します。 } 与える() { console.log('コンポーネントが更新されました') 戻る ( <div> <h1>カウンター: {this.state.count}</h1> <button onClick={this.handleClick}>+1</button> </div> ) } } ReactDOM.render(<Opp />, document.getElementById('root')) 例: 乱数 nextState経由 'react' から React をインポートします 'react-dom' から ReactDOM をインポートします。 // 乱数を生成する class Opp extends React.Component { 状態 = { 番号: 0, } ハンドルクリック = () => { this.setState((状態) => { 戻る { 数値: Math.floor(Math.random() * 3)、 } }) } // 2回生成された乱数は同じになる可能性があるため、再レンダリングする必要はありません。shouldComponentUpdate(nextState) { console.log('最新の状態:', nextState, '現在の状態:', this.state) nextState.number !== this.state.number を返します /* if ( nextState.number !== this.state.number) { 真を返す } falseを返す*/ } 与える() { console.log('レンダリング') 戻る ( <div> <h1>乱数: {this.state.number}</h1> <button onClick={this.handleClick}>再生成</button> </div> ) } } ReactDOM.render(<Opp />, document.getElementById('root')) nextState経由 'react' から React をインポートします 'react-dom' から ReactDOM をインポートします。 // 乱数を生成する class Opp extends React.Component { 状態 = { 番号: 0, } ハンドルクリック = () => { this.setState((状態) => { 戻る { 数値: Math.floor(Math.random() * 3)、 } }) } 与える() { 戻る ( <div> <NumberBox number={this.state.number} /> <button onClick={this.handleClick}>再生成</button> </div> ) } } クラス NumberBox は React.Component を拡張します { コンポーネントを更新する必要があります(次のプロパティ) { console.log('最新のプロパティ:', nextProps, '現在のプロパティ:', this.props) nextProps.number !== this.props.number を返します } 与える() { console.log('サブコンポーネントのレンダリング') 戻り値 <h1>乱数: {this.props.number}</h1> } } ReactDOM.render(<Opp />, document.getElementById('root')) 要約するこの記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySQL でコミットされていないトランザクションを見つけるための SQL の例の簡単な分析
>>: Dockerコンテナ監視の原理とcAdvisorのインストールおよび使用方法
最近、プロジェクトでは kubernetes (以下、k8s と表記、k と s の間には 8 つの...
Vueカードのフリップカルーセル表示、フリップ時にデータを切り替えながら、参考までに、具体的な内容は...
この記事では、Linux 環境の Apache サーバーでセカンダリ ドメイン名を構成する方法につい...
目次1. Bootstrapグリッドシステムの仕組み1.1 12グリッドシステム1.2 Bootst...
目次バックグラウンドで10,000個のデータが失われた再帰法非再帰的方法要約するバックグラウンドで1...
CSS変数の知識を使って、追加したコードとコメントを直接投稿します <!DOCTYPE htm...
1. MYSQLインストールディレクトリ次のようにコードをコピーします。 select @@bas...
1. ツール今必要なツールは2つあります: MySQLサーバー (mysql-5.7.18)、MyS...
次のような疑問が湧くかもしれません。MySQLをローカル (自分のコンピュータ) にインストールした...
この記事は主にInnoDBのロックに関する知識を素早く理解してもらうことを目的としています。 Roc...
1. 現在インストールされているPHPパッケージを確認するyum list installed |...
MySQL 5.7.20のインストールと設定方法のグラフィックチュートリアルをあなたと共有します1...
Nginx Rewriteの使用シナリオ1. URL アドレスジャンプ。たとえば、ユーザーが pm....
多くの場合、bash スクリプト内またはスクリプト自体内で直接 sudo を使用してコマンドを実行す...
最近のウェブサイトでは SSL を有効にするのが標準となっています。ただし、SSL を設定した後も、...