2016-06-06 6 views
1

저는 현재 일반적인 React 스타일로 목록을 렌더링합니다. 목록은 배열 소품으로 전달되고, 그래서 같이 그 위에지도 : 새로운 요소를 추가 할 때 최신 항목이 목록의 끝에 추가 것처럼 React : 주어진 배열을 역순으로 역순으로 렌더링합니다.

{this.props.myList.map(createListItem, this)} 

그래서,이 나타납니다.

최신 항목이 맨 위에 표시되도록하겠습니다. 모든 것이 역순으로 나타납니다.

두 가지 옵션은 다음과 같습니다. 1) 목록을 역순으로 추가 할 때마다 새로운 배열을 만들고이 반대 목록을 소품으로 전달하십시오. 2) 교대를 사용하십시오.

하지만 성능면에서 모두 매력적이지 않습니다.

역순으로 매핑을 지원하는 자바 스크립트를 인식하지 못합니다. 나는 for-loop를 시도해 왔지만 작동시키지 못했습니다.

React에서 역순으로 배열을 렌더링하는 관용적 인 방법은 무엇입니까? 즉시 호출 기능을

array.splice(0,0,'value to add at beginning'); 

을 아니면 for 루프를 호출 :

+0

this.props.myList.reverse()입니다. 옵션을 매핑 하시겠습니까? –

+0

네이티브 리버스() 메서드를 사용하는 것은 나쁜 생각이 아니라고 생각합니다. Google 크롬 array.reverse는 다른 방법보다 빠릅니다. 그러나 성능이 실제로 콘서트 인 경우 여기에있는 답변에서 설명하는 방법을 사용할 수 있습니다. http://stackoverflow.com/questions/5276953/what-is-themost- 효율적인 방법 - 역 - 배열에서 - 자바 스크립트 – nuway

+0

나는 당신이 이것을 overthinking 수 있습니다 생각합니다. 제안한 두 가지 방법 모두 1ms 미만의 큰 배열에서도 실행됩니다. 둘 다 이미 사용하고있는'map'보다 훨씬 더 성능이 좋습니다. – gravityplanx

답변

0

배열의 시작 부분에 새로운 요소를 추가

{(() => { 
    for(...) { 
     return (<i>{whatever}</i>) 
    } 
})()} 
+3

array.unshift (val) – juvian

+0

사실, 왜 내가'splice'에 뛰어 올랐는지 모르겠습니다. :) – vcanales

0

배열에서 밀어하고 렌더링 할 때 유지, 당신은 간단하게 사용할 수 있습니다

Array.reverse() 

여기서 documentation

다른 사람이 겸손한 역 방법을 지적 대부분의 작업을 수행 한 것처럼 원래 하나

0

를 변이 것을 상기시킨다. 나는 현재 같은 문제에 부딪 혔고, 나는 크롬에서 array.reverse() atleast를 사용하면 퍼포먼스가 그다지 좋지 않다고 말할 것입니다. 제 의견으로는 역순으로 목록을 정렬하는 루프를 사용하는 것보다 낫습니다.

array.reverse() 
관련 문제