효율성을 위해 React/Redux 앱을 구성하십시오.

Question

클립이 포함 된 트랙 테이블을 표시하는 오디오 워크 스테이션 앱을 빌드하십시오. 지금은 테이블 객체를 반환하는 테이블 축소 기가 있습니다. 테이블 개체는 트랙 개체를 포함하고 트랙 개체는 클립 개체를 포함합니다. 나는 테이블 저장소에 가입 한 TableContainer를 가지고있다. 내 문제는 클립이 추가되거나 조작 될 때마다 페이지를 렌더링하기 때문에 내 앱이 비효율적이라고 생각합니다. 실제로 클립이있는 특정 트랙 만 다시 렌더링해야합니다. 어떻게 모든 애플 리케이션을 구조화하여 모든 작은 변화가 전체 애플 리케이션을 렌더링하지 않을까요?

Answer 1

반응의 힘은 가상 DOM을 사용하여 비교 및 ​​shouldComponentUpdate 기능을 사용하여 필요한 것만 다시 렌더링하는 것입니다.

성능 문제가되기 전에 너무 많이 들여다 보지 않을 것입니다.

그렇다면 트랙을 별도의 디렉토리에 저장하고 앱 (주) 구성 요소로 전달하지 마십시오. Clip 구성 요소의 mapStateToProps 함수 (react-redux를 사용하는 경우)의 상태에서 트랙을 가져오고 소품의 이름을 가져옵니다. 이 방법으로 트랙이 많이 변경되면 (예 : 조각의 비동기 가져 오기로 인해) 구성 요소 만 업데이트됩니다.

Answer 2

모든 구성 요소의 mapStateToProps에서 전체로 상위 개체를 선택하여 구성 요소에 보내지 마십시오. 가능한 경우 리프 값까지의 모든 속성을 선택하십시오. TableContainer의 render() 자체가 tracks 배열을 사용하지 않으면 사용하는 형제 속성 만 전달되는지 확인하십시오.

function mapStateToProps(state, props) { 
    return { 
    table: state.tables[props.tableId]; 
    } 
} 

해야 할 것 : :

그래서 대신

는

function mapStateToProps(state, props) { 
    let table = state.tables[props.tableId]; 
    return { 
    name: table.name, 
    type: table.type 
    }; 

이것은 구성 요소가 다시 렌더링해야하는지 여부를 결정하는 때 더 안목으로 돌아 오는 반응 할 수 있습니다. clip 변경으로 인해 table이 변경 되었더라도 name 또는 type이 변경되지 않았습니다.

그러나 Table 구성 요소는 Track 구성 요소를 렌더링하기 때문에 렌더 호출을 피할 수는 없습니다. 트리 위쪽의 모든 속성이 변경되면 tracks 배열도 변경됩니다.

이 경우 해결책은 전체 track 개체를 포함하지 않고 tracks 배열에 트랙 ID 목록 만 포함시키는 것입니다. 그런 다음 테이블과 함께 트랙을 저장할 수 있으며 하나의 변경이 다른 테이블에 영향을 미치지 않습니다. 이 옵션은 Table 구성 요소의 mapStateToProps에있는 트랙 객체를 가져 와서 전달하지 않는 경우에만 작동합니다. Track 구성 요소를 실제 오브젝트 대신 ID로 사용하도록 구성해야합니다. 이 방법으로 Table 구성 요소는 트랙의 내용에 전혀 의존하지 않습니다.