React は非常に人気のあるフロントエンド フレームワークです。今日は、React 開発者が注意すべき 7 つのポイントについて説明します。 1. コンポーネントの肥大化React 開発者は必要なだけのコンポーネントを作成しません。この問題は React 開発者に限らず、多くの Vue 開発者にも影響を及ぼします。 もちろん、ここでは React について話しています。 React では、さまざまなタスクを実行するために多くのコンテンツを含むコンポーネントを作成できますが、コンポーネントを簡潔に保つことが最適です。つまり、1 つのコンポーネントは 1 つの関数に関連付けられます。これにより、時間を節約できるだけでなく、問題を正確に特定するのにも役立ちます。 // ./components/TodoList.js 'react' から React をインポートします。 '../hooks/useTodoList' から useTodoList をインポートします。 '../hooks/useQuery' から useQuery をインポートします。 './TodoItem' から TodoItem をインポートします。 './NewTodo' から NewTodo をインポートします。 定数TodoList = () => { 定数 getQuery, setQuery } = useQuery(); 定数todos = useTodoList(); 戻る ( <div> <ul> {todos.map(({ id, title, 完了 }) => ( <TodoItem キー={id} id={id} タイトル={title} 完了={完了} /> ))} <新しいTodo /> </ul> <div> 不完全な項目のクエリを強調表示します: <入力値={getQuery()} onChange={e => setQuery(e.target.value)} /> </div> </div> ); }; デフォルトの TodoList をエクスポートします。 2. 状態を直接変更するReact では、状態は不変である必要があります。状態を直接変更すると、修正が困難なパフォーマンスの問題が発生します。 constmodifyPetsList = (要素、ID) => { ペットリスト[id].checked = 要素.target.checked; ペットリストを設定します。 } 上記の例では、配列オブジェクト内のチェックされたキーを変更します。しかし、問題があります。同じ参照を使用してオブジェクトが変更されたため、React はそれを監視できず、再レンダリングをトリガーできません。 この問題を解決するには、setState() メソッドまたは useState() フックを使用する必要があります。 前の例を useState() メソッドを使用して書き直します。 constmodifyPetsList = (要素、ID) => { const { チェック済み } = 要素.target; setpetsList((ペット) => { 戻り値: pets.map((pet, index) => { if (id === インデックス) { pet = { ...pet、チェック済み }; } ペットを返す; }); }); }; 3. プロパティは数値を渡す必要があるが文字列が渡される、またはその逆これは非常に小さなエラーであり、発生するはずがありません。 クラスArrivalはReact.Componentを拡張します。 与える() { 戻る ( <h1> こんにちは! {this.props.position === 1 ? "first!" : "last!"} に到着しました。 </h1> ); } } ここで、=== は文字列 '1' に対して無効です。この問題を解決するには、props 値を渡すときに {} でラップする必要があります。 // ❌ const要素 = <到着位置='1' />; //✅ const要素 = <到着位置={1} />; 4. キーはリストコンポーネントで使用されていません次のリスト項目をレンダリングする必要があるとします。 const リスト = ['cat', 'dog', 'fish']; 与える() { 戻る ( <ul> {リスト.map(リスト番号 => <li>{リスト番号}</li>)} </ul> ); } もちろん、上記のコードは機能します。リストが大きく、変更する必要がある場合、レンダリングの問題が発生します。 React は、ドキュメント オブジェクト モデル (DOM) 上のすべてのリスト要素を追跡します。リストに何が起こったかを React に伝える記録はありません。 この問題を解決するには、リスト要素にキーを追加する必要があります。キーは各要素に一意の ID を与え、React がどの項目が追加、削除、または変更されたかを判断するのに役立ちます。 <ul> {リスト.map(リスト番号 => <li キー = {リスト番号} > {リスト番号}</li>)} </ul> 5. setStateは非同期操作ですReact の状態は非同期的に動作することを忘れがちです。値を設定した直後にアクセスしようとすると、すぐに値を取得できない可能性があります。 ハンドルペット更新 = (ペット数) => { this.setState({ petCount }); this.props.callback(this.state.petCount); // 古い値 }; これを処理するためのコールバック関数である setState() の 2 番目のパラメータを使用できます。例えば: ハンドルペット更新 = (ペット数) => { this.setState({ petCount }, () => { this.props.callback(this.state.petCount); // 更新された値 }); }; 6. Reduxの頻繁な使用大規模な React アプリでは、多くの開発者が Redux を使用してグローバル状態を管理します。 7. コンポーネント名は大文字で始まっていないJSX では、小文字で始まるコンポーネントは HTML 要素にコンパイルされます。 したがって、次のことは避けるべきです。 クラスdemoComponentNameはReact.Componentを拡張します{ } これによりエラーが発生します: React コンポーネントをレンダリングする場合は、大文字で始める必要があります。 クラスDemoComponentNameはReact.Componentを拡張します。 } あとがき上記の内容は、React を使用する際に避けるべき 10 の間違いから抜粋したものです。言い換えアプローチを使用して、さらに実用的な 7 つの内容を抽出しています。 これで、React を使用する際に陥りやすい落とし穴 7 つについての記事は終了です。React の落とし穴に関する関連記事については、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: MySQL 8.0.12 winx64 解凍バージョンのインストール グラフィック チュートリアル
>>: Zookeeperスタンドアロン環境とクラスタ環境の構築
1. 実装のアイデアインターフェース署名の目的は、リクエストパラメータが改ざんされていないか、リクエ...
今日、jsp ページを書きました。<div style="margin:0 auto...
この記事ではVueを使ってプログレスバーの変更を簡単に実装してみましたので参考にしてください。具体的...
Magento を頻繁に変更する場合、element.style に遭遇することがあります。 これは...
1.sshコマンドLinux では、ssh コマンドを使用して別のサーバーにログインできます。 2 ...
基本的な3列レイアウト 。容器{ ディスプレイ: フレックス; 幅: 500ピクセル; 高さ: 20...
目次序文状態DockerをインストールするRedisのマスターノードとスレーブノードを構成する序文以...
Docker パッケージは、デフォルトの CentOS-Extras リポジトリにすでに含まれていま...
目次1. 概要2. MySQLデータ型の詳細な説明1) 文字列型2) 整数型3) 浮動小数点型4) ...
1 概要システム Centos8 では、httpd を使用してローカル Web サーバーを構築します...
ローカルの MySQL バージョンが比較的低いため、最近 MySQL のバージョンをアップグレードす...
1 セミコロン「;」のない CSS スタイル2 タグが閉じられておらず、「>」がありません...
目次ルーティングとは純粋コンポーネントの基本的な使用純粋なコンポーネントの使用に関する注意事項ルーテ...
1. 公式サイトにアクセスします: D:\mysql-5.7.21-winx64\bin をダウンロ...
目次1. 手書きのインスタンス2.配列のマップメソッドを実装する3. Reduceは配列のmapメソ...