ホームページ  >  記事  >  ウェブフロントエンド  >  なぜ React はリストをレンダリングするために特別なコンポーネントを使用するのでしょうか?

なぜ React はリストをレンダリングするために特別なコンポーネントを使用するのでしょうか?

WBOY
WBOYオリジナル
2022-05-05 10:33:151926ブラウズ

React が大規模なデータ コレクションをレンダリングする場合、コーディネーターは変更されたコレクションごとに生成されたコンポーネントを評価する必要があるため、非常に非効率的です。特殊なコンポーネントを使用してリストをレンダリングすると、大規模なデータ コレクションのレンダリングを向上させることができます。他のコンポーネントをレンダリングします。

なぜ React はリストをレンダリングするために特別なコンポーネントを使用するのでしょうか?

このチュートリアルの動作環境: Windows 10 システム、react17.0.1 バージョン、Dell G3 コンピューター。

react がリストのレンダリングに専用コンポーネントを使用する理由

専用コンポーネントでのリストのレンダリング

これは、大規模なデータ コレクションをレンダリングする場合に特に重要です。 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 &#39;react&#39;
export default class App extends Component {
// 假设服务器端返回如下
state={books:[&#39;巴黎圣母院&#39;,&#39;悲惨世界&#39;,&#39;爱的教育&#39;,&#39;简·爱&#39;,&#39;钢铁是怎样炼成的&#39;,&#39;安徒生童话&#39;]}
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 &#39;react&#39;
export default class App extends Component {
// 假设服务器端返回如下
state={books:[&#39;巴黎圣母院&#39;,&#39;悲惨世界&#39;,&#39;爱的教育&#39;,&#39;简·爱&#39;,&#39;钢铁是怎样炼成的&#39;,&#39;安徒生童话&#39;]}
booklist(){
// 把服务器端返回的字符串数组转换为JSX数组
return this.state.books.map( (b,i)=> <li key={i}>《{b}》</li> )
}
render() {
return (
<div>
<ul>
{this.booklist()}
</ul>
</div>
)
}
}

下の図に示すように、上記の方法の結果は同じです

推奨される学習 : 《

反応ビデオチュートリアル

なぜ React はリストをレンダリングするために特別なコンポーネントを使用するのでしょうか?

以上がなぜ React はリストをレンダリングするために特別なコンポーネントを使用するのでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。