큰 상태의 React/Redux 퍼포먼스

Question

많은 편집 가능한 값 (* 큰 값> 1000)을 가진 큰 json을 다루고 있으며, 완전히 같은 페이지에 렌더링되어 있으므로 내 상태는 간단하게 { data: bigBigJson }입니다.

초기 렌더링은 꽤 길지만 괜찮습니다.

입력이 onChange (및 redux 동작)을 트리거하면 값이 상태에서 업데이트되고 전체 렌더링이 다시 발생한다는 점이 문제입니다.

사람들이 어떻게 대처하는지 궁금하네요. 간단한 솔루션이 있습니까 (모범 사례는 아님).

주 :

는 JSON 문서가 외부 API에서 제공

• , 나는 그것을 변경할 수 없습니다

• I 수 여러 개의 하위 상태의 상태가 (이 복수의 분리 수준 json),하지만 간단하고/빠른 솔루션을 기대하고있다. (아마도 최선의 방법이 될 것이다.)

• 나는 immutable.js가 아니라 react와 redux를 사용하고 있지만 모든 것이 불변이다. - 명백하게)

(의이 상태가 있다고 가정 해 봅시다

• (사례 1)) DSS 답변에 대한

업데이트 : keyN이 업데이트

{ 
    data: { 
    key1: value1, 
    // ... 
    key1000: value1000 
    } 
} 

경우 모든 어쨌든 상태는 다시 렌더링 될 것입니까? 감속기는 다음과 같이 반환합니다.

{ 
    data: { 
    ...state.data, 
    keyN: newValueN 
} 

그건 한 가지지만 사실은 그렇지 않습니다.

• (사례 2) 상태는 이상 (간체 이상)과 같다 : dataN.keyN가 업데이트

{ 
    data: { 
    dataSet1: { 
     key1: value1, 
     // ... 
     key10: value1000 
    }, 
    // ... 
    dataSet100: { 
     key1: value1, 
     // ... 
     key10: value1000 
    } 
    } 
} 

경우에, 나는 감속기

{ 
    data: { 
    ...state.data, 
    dataN: { 
     ...state.data.dataN, 
     keyN: newValueN 
    } 
    } 
} 

나는 내가 뭘 생각에 반환 정말 좋지 않은 뭔가 잘못되었습니다. 은 그렇게 아무것도 바꿀 것 :

// state 
{ 
    dataSet1: { 
    key1: value1, 
    // ... 
    key10: value1000 
    }, 
    // ... 
    dataSet100: { 
    key1: value1, 
    // ... 
    key10: value1000 
    } 
} 

// reducer 
{ 
    ...state, 
    dataN: { 
    ...state.dataN, 
    keyN: newValueN 
    } 
} 

을 마지막으로 내 감속기 (간체 여전히 비트)의 모양 여기 더, 내 경우에 대한 자세한 구체적으로 :

import get from 'lodash/fp/get' 
import set from 'lodash/fp/set' 
// ... 
// reducer: 
// path = 'values[3].values[4].values[0]' 
return { 
    data: set(path, { 
    ...get(path, state.data), 
    value: newValue 
    }, state.data) 
} 

에서 • 경우 당신은 그냥 사용할 수 없습니다 궁금해 : 다른 속성으로

data: set(path + '.value', newValue, state.data)

도 업데이트해야합니다.

Answer 1

모든 것이 다시 렌더링되는 이유는 저장소의 모든 항목이 변경되기 때문입니다. 똑같이 보일 수도 있습니다. 모든 속성은 동일한 값을 가질 수 있습니다. 그러나 모든 객체 참조가 변경되었습니다. 즉, 두 개의 객체가 동일한 속성을 가지고 있어도 여전히 서로 다른 ID를가집니다.

React-Redux는 객체 식별 정보를 사용하여 객체가 변경되었는지 파악하기 때문에 객체가 변경되지 않을 때마다 항상 동일한 객체 참조를 사용해야합니다. Redux 상태는 변경 불가능해야하므로 새 상태의 이전 객체를 사용하면 문제가 발생하지 않을 것입니다. 변경 불가능한 객체는 정수 나 문자열을 재사용 할 수있는 것과 같은 방법으로 재사용 할 수 있습니다.

귀하의 딜레마를 해결하려면 감속기에서 JSON 및 상점 상태 하위 오브젝트를 검토하고 비교할 수 있습니다. 동일하면 저장소 개체를 사용해야합니다. React-Redux는 동일한 객체를 재사용함으로써 해당 객체를 나타내는 구성 요소가 다시 렌더링되지 않도록합니다. 즉, 1000 개의 개체 중 하나만 변경되면 하나의 구성 요소 만 업데이트됩니다.

또한 React key 속성을 올바르게 사용하십시오. 이 1000 개의 항목에는 JSON에서 JSON으로 동일하게 유지되는 자체 ID가 필요합니다.

마지막으로, 상태 자체를 이러한 업데이트에보다 적합하게 만드는 것을 고려하십시오. 상태를로드하고 업데이트 할 때 JSON을 변형 할 수 있습니다. 예를 들어 ID로 입력 한 항목을 저장하면 업데이트 프로세스가 훨씬 빨라집니다.