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スタンドアロン環境とクラスタ環境の構築
この記事では、カスタムツリーコンポーネントを再帰的に実装するVueの具体的なコードを参考までに共有し...
最近、WeChatミニプログラムは、監査ミニプログラムのwx.loginおよびwx.getUserI...
1つ目: テキスト/HTML経由var txt1="<h1>テキスト。<...
1.MySQL関数1. 数学関数PI() # 円周率 (pi) の値を返します。デフォルトの小数点...
序文Linux でショートカットを作成すると、アプリケーションをより速く開くことができます。ここで、...
目次序文時間型を保存するのに文字列を使用しないでくださいMySQL の日付型日時タイムスタンプTIM...
目次背景1. クエリ条件に「or」が含まれているため、インデックスが失敗する可能性があります。 2....
この記事では、テーブル切り替えプラグインを実装するためのJavaScriptのカプセル化コードを参考...
1. コンセプトこれらはすべて Element の属性であり、要素の幅を示します。 Element....
目次序文文章1. グローバル登録2. 部分登録3. フック機能とパラメータ設定4. 柔軟な使い方(1...
目次エラーのデモンストレーション計算により画像が変わらない場合は直接インポートするCSS変数による画...
目次導入例: イベントの委任記述方法1: イベント委譲書き方2: 各子要素がイベントをバインドする例...
<frameset></frameset>は皆さんもよくご存知のものです。こ...
1. 基本的な Spring-boot クイックスタート1.1 クイックスタート pom.xml は...
仕事上、携帯電話に適応した Web ページ効果を作成する必要があります。ようやく完成しました。まずは...