ホームページ > 記事 > ウェブフロントエンド > なぜ React はリストをレンダリングするために特別なコンポーネントを使用するのでしょうか?
React が大規模なデータ コレクションをレンダリングする場合、コーディネーターは変更されたコレクションごとに生成されたコンポーネントを評価する必要があるため、非常に非効率的です。特殊なコンポーネントを使用してリストをレンダリングすると、大規模なデータ コレクションのレンダリングを向上させることができます。他のコンポーネントをレンダリングします。
このチュートリアルの動作環境: Windows 10 システム、react17.0.1 バージョン、Dell G3 コンピューター。
専用コンポーネントでのリストのレンダリング
これは、大規模なデータ コレクションをレンダリングする場合に特に重要です。 React は、コーディネーターが変化するコレクションごとに結果のコンポーネントを評価する必要があるため、大規模なデータ コレクションをレンダリングするときのパフォーマンスが非常に低下します。したがって、特別なコンポーネントを使用してコレクション (配列) をマップし、このコンポーネントをレンダリングし、他のコンポーネントは決してレンダリングしないことをお勧めします。
Bad:
class MyComponent extends Component { render() { const {todos, user} = this.props; return (<div> {user.name} <ul> {todos.map(todo => <TodoView todo={todo} key={todo.id} />)} </ul> </div>) } }
上の例では、ユーザーが名前が変更されると、React はすべての TodoView コンポーネントを不必要に調整します。TodoView コンポーネントは再レンダリングされませんが、調整プロセス自体は非常に高価です。 React でのリスト レンダリング
Vue.js で v-for を使用して、テンプレート内のリスト項目のループ レンダリングを実装します。アプレットで wx:for を使用して、リストを実装します。テンプレート アイテム ループ レンダリング;
React にはテンプレートがありません (つまり、v-for が必要ありません)、命令システムもありません (つまり、同様のメカニズムが提供されていません)。方法 1: for ループ トラバーサル
class MyComponent extends Component { render() { const {todos, user} = this.props; return (<div> {user.name} <TodosView todos={todos} /> </div>) } }方法 2: マップされた JSX 配列を返す関数を作成します
class TodosView extends Component { render() { const {todos} = this.props; return <ul> {todos.map(todo => <TodoView todo={todo} key={todo.id} />)} </ul>) } }
import React, { Component } from 'react' export default class App extends Component { // 假设服务器端返回如下 state={books:['巴黎圣母院','悲惨世界','爱的教育','简·爱','钢铁是怎样炼成的','安徒生童话']} booklist(){ // 把服务器端返回的字符串数组转换为JSX数组 let arr=[] for(let i=0;i<this.state.books.length;i++){ arr.push( <li key={i}>《{this.state.books[i]}》</li> ) } return arr } render() { return ( <div> <ul> {this.booklist()} </ul> </div> ) } }方法 3:マップされた JSX 配列を直接バインドします
showList(){ return this.state.list.map( (e,i)=>JSX ) } {this.showList() }
import React, { Component } from 'react' export default class App extends Component { // 假设服务器端返回如下 state={books:['巴黎圣母院','悲惨世界','爱的教育','简·爱','钢铁是怎样炼成的','安徒生童话']} booklist(){ // 把服务器端返回的字符串数组转换为JSX数组 return this.state.books.map( (b,i)=> <li key={i}>《{b}》</li> ) } render() { return ( <div> <ul> {this.booklist()} </ul> </div> ) } }下の図に示すように、上記の方法の結果は同じです
推奨される学習 : 《
反応ビデオチュートリアル》
以上がなぜ React はリストをレンダリングするために特別なコンポーネントを使用するのでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。