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のインストールおよび使用方法
概要今日は主に、MySQL データベースから binlog ログを正しく削除する方法を紹介します。ロ...
序文Nginx (「エンジン エックス」と発音) は、リバース プロキシ、ロード バランサ、HTTP...
別のツリー構造があるJavascriptオブジェクトでは、このツリーが本物であると伝えるだけでよいD...
Brotli は、Zopfli よりも 20 ~ 26% 高い圧縮率を実現できる新しいデータ形式です...
このチュートリアルでは、MySQL 5.7のインストールと設定方法を参考までに紹介します。具体的な内...
async_hooks モジュールは、Node.js バージョン 8.0.0 に正式に追加された実験...
目次序文: 1. Navicatの紹介2. シンプルなチュートリアルの共有接続管理ライブラリテーブル...
文法 背景: linear-gradient(direction,color-stop1,color...
前回のキャンバス ゲーム シリーズへようこそ: 《VUEがFlappy Birdを実装しました〜〜〜...
みなさんこんにちは。今日はカルーセルの実装についてお話しします。私が作成したカルーセルの効果は次のと...
1. まず、次のパスに従って対応するフォルダを作成します。 ローカルのdockerでmysqlを実行...
目次前面に書かれた予防開発環境構築開発構成に関する注意事項前面に書かれたuni-app は、Vue....
<marquee> タグはペアで表示されるタグです。最初のタグ <marquee...
clip-path CSS プロパティはクリッピングを使用して要素の表示可能領域を作成します。領域内...
Code Cloudで新しいプロジェクトtest1を作成します。 公開鍵を取得するには次のコマンドを...