>  기사  >  웹 프론트엔드  >  React가 목록을 렌더링하기 위해 특수 구성 요소를 사용하는 이유는 무엇입니까?

React가 목록을 렌더링하기 위해 특수 구성 요소를 사용하는 이유는 무엇입니까?

WBOY
WBOY원래의
2022-05-05 10:33:151949검색

React가 대규모 데이터 컬렉션을 렌더링할 때 코디네이터는 변경된 각 컬렉션에서 생성된 구성 요소를 평가해야 하기 때문에 매우 비효율적입니다. 목록을 렌더링하기 위해 특수 구성 요소를 사용하면 대규모 데이터 컬렉션 렌더링 성능이 향상될 수 있으며 다른 구성 요소는 렌더링되지 않습니다.

React가 목록을 렌더링하기 위해 특수 구성 요소를 사용하는 이유는 무엇입니까?

이 튜토리얼의 운영 환경: Windows 10 시스템, 반응 버전 17.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>)
    }
}

위 예에서 user.name이 변경되면 React가 필요하지 않게 됩니다. 모든 TodoView 구성 요소를 조정합니다. TodoView 구성 요소는 다시 렌더링되지 않지만 조정 프로세스 자체는 매우 비쌉니다.

좋음:

class MyComponent extends Component {
    render() {
        const {todos, user} = this.props;
        return (<div>
            {user.name}
            <TodosView todos={todos} />
        </div>)
    }
}
class TodosView extends Component {
    render() {
        const {todos} = this.props;
        return <ul>
            {todos.map(todo => <TodoView todo={todo} key={todo.id} />)}
        </ul>)
    }
}

List 렌더링은 Vue.js에서 v-for를 사용하여 구현되었습니다.

애플릿에서 wx:for를 사용하여 템플릿에 있는 목록 항목의 루프 렌더링을 구현하세요.

React에는 템플릿이 없으며(즉, v-for가 필요하지 않습니다.) 명령 시스템(즉, 유사한 메커니즘이 없음).

방법 1: for 루프 탐색

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>
)
}
}
방법 2: 매핑된 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>
)
}
}

방법 3: 매핑된 JSX 배열을 직접 바인딩

{
this.state.list.map( (e,i)=>JSX )
}
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;]}
render() {
return (
<div>
<ul>
{/*this.booklist()*/}
{
/*此处不能急 编写for循环——for不是表达式*/
this.state.books.map( (b,i)=> <li key={i}>《{b}》</li> )
}
</ul>
</div>
)
}
}
위 방법의 결과는 다음과 같습니다. 아래 그림과 같이 모두 동일합니다

추천 학습: "React가 목록을 렌더링하기 위해 특수 구성 요소를 사용하는 이유는 무엇입니까?react 비디오 튜토리얼

"

위 내용은 React가 목록을 렌더링하기 위해 특수 구성 요소를 사용하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.