소품을 업데이트하면 전체 구성 요소를 다시 렌더링해야합니까?

Question

이렇게 초기화 된 CookingClass 구성 요소가 있다고 가정 해 보겠습니다. 교사의

let teachers = makeTeachers(["Amber", "Jason", "Lily"]) 
let students = makeStudents(["Hopper"]) 

<CookingClass 
    teachers={teachers} 
    students={students} 
/> 

하나는 탈락 :

let newTeachers = makeTeachers(["Amber", "Jason"]) 

<CookingClass 
    teachers={newTeachers} 
/> 

그것은 전체 구성 요소가 다시 렌더링 할 것입니다. React가 diff를 계산하고 효율적으로 렌더링을 재현하는지 확신 할 수 없거나 직접 shouldComponentUpdate을 사용해야합니다.

더 많은 실제 예가 백만 개의 마커가 있고 마커 중 하나를 대체하려는 Google지도를 구현할 수 있습니다.

Answer 1

소위 가상 DOM 노드가 변경됩니다. 가상 노드의 모든 변경에 대해 shouldComponentUpdate()이 호출됩니다. 직접 구현하지 않으면 항상 return true;

CookingClass을 다시로드하려는 경우 직접 구현해야합니다.

React의 프로는 Virtual DOM에서 변경 될 때만 Native DOM 노드를 다시 렌더링한다는 것입니다. 이것은 React를 매우 빠르게 만드는 "렌더링"입니다.

Answer 2

실제 DOM 렌더링은 매우 효율적 인 innerHTML 삽입물로 처리하고 응용 프로그램 VirtualDomTree의 새 데이터 구조를 변경하는 경우에만 완전히 처리됩니다.

shouldComponentUpdate() 구성 요소가 이어야 다시 계산됩니다.이어야합니다. 예를 들어, 통계 데이터를 렌더링 할 때이를 사용해야합니다. 구성 요소의 출력은 변경되지 않으므로 false을 반환 할 수 있으며 구성 요소의 첫 번째 버전은 영구적으로 사용됩니다.)

Answer 3

샘플 코드를 기반으로 구성 요소가 매번 다시 렌더링됩니다.

구성 요소를 상점에 연결하려면 react-redux (documentation) 바인딩을 사용해야합니다.

// ConnectedCookingClass.js 
import { connect } from 'react-redux'; 
import CookingClass from './CookingClass'; 

const mapStateToProps = (state) => { 
    return { 
    teachers: state.teachers, 
    students: state.students 
    }; 
}; 

const ConnectedCookingClass = connect(mapStateToProps)(CookingClass); 

export default ConnectedCookingClass; 

다음과 같이 다른 곳에서이 구성 요소를 사용

// OtherComponent.js 
import ConnectedCookingClass from './ConnectedCookingClass'; 

const OtherComponent = React.createElement({ 
    render() { 
    return (
     <div> 
     <ConnectedCookingClass /> 
     </div> 
    ); 
    } 
}); 

---

반응-REDUX 바인딩은 소품에 의해 반환 된 경우에만 구성 요소를 렌더링 다시처럼 당신을 위해 몇 가지 똑똑한 일을 할 것입니다 mapStateToProps은 실제로 이전 값 (via a shallowEqual comparison)과 다르므로 여기서는 아무런 기능도 반환하지 말아야합니다. 함수는 mapDispatchToProps에 반환되어야합니다.

반응-REDUX에서 shouldComponentUpdate의 디폴트 구현은 true를 돌려줍니다 때 구성 요소가 소품 수동으로 업데이트되었습니다는 "순수"구성 요소 (일명 stateless-function)

(이후

1. 항상 경우 componentWillReceiveProps가 호출 됨)
2. 저장소가 변경되고 새 소품이 이전 소품과 다를 때.

여기 즉 source code에서의 모습입니다 :

shouldComponentUpdate() { 
    return !pure || this.haveOwnPropsChanged || this.hasStoreStateChanged 
}