어레이 생성 시 반응 감소x 리렌더

어레이 생성 시 반응 감소x 리렌더

연결된 구성 요소가 있는데 여기서 개체 배열을 검색하려고 해.내 가게에는 ID가 줄지어 있고, 내가 이런 아이템을 보관하는 물체가 있다.

const state = {
  items: [0, 1, 2],
  itemsById: {
    0: {},
    1: {},
    2: {},
  },
}

그래서 사용connectreaction-remedex 기능, 올바른 배열을 주입하기 위해 구성 요소에서 다음을 수행하십시오.

const mapStateToProps = (state) => ({
  items: state.items.map((itemId) => state.itemsById[itemId]),
})

내 앱이 업데이트를 매우 자주 트리거함(작업 디스패치:requestAnimationFrame() 그러나items프로세스 중에 어레이가 변경되지 않음.React Perf addon으로 앱을 분석해보니 연결된 컴포넌트가 불필요한 렌더링을 하는 것 같고, 그 이유는 잘 이해가 되지 않는다.items주(州)에서는 변하지 않는다.

나는 이미 다시 선택해서 메모한 선택기를 만들려고 했지만, 아무것도 바뀌지 않는 것 같아.

업데이트(솔루션)

다시 선택해서 만든 선택기를 사용할 때 작동한다.내 문제는 선택기 자체에 있었다.items어레이는 매우 자주 업데이트되는 상위 개체에 위치하며, 나는 이 개체를 선택하는 대신items직접 배열하다

이러지 마십시오.

const parentSelector = (state) => state.parent
const itemsByIdSelector = (state) => state.itemsById
const selector = createSelector(
  parentSelector,
  itemsByIdSelector,
  (parent, itemsById) => parent.items.map(...)
)

다음 작업을 수행하십시오.

const itemsSelector = (state) => state.items
const itemsByIdSelector = (state) => state.itemsById
const selector = createSelector(
  itemsSelector,
  itemsByIdSelector,
  (items, itemsById) => items.map(...)
)

이렇게 하면 연결이 호출될 때마다 새 어레이를 생성하는 경우:

const mapStateToProps = (state) => ({
  items: state.items.map((itemId) => state.itemsById[itemId]),
})

이를 방지하려면 실제로 변경되지 않는 한 매번 동일한 배열을 반환하는 메모화된 선택기를 사용하십시오.선택기는 상태로부터 파생된 데이터를 계산하는 방법이다.다시 선택란 리듀렉스용으로 메모된 선택기 라이브러리 입니다.

참조URL: https://stackoverflow.com/questions/39062188/react-redux-rerenders-when-creating-arrays