객체 소품의 반응에서 반응
react에서는 객체를 소품으로 전송하면 다시 렌더링을 트리거합니다 (이를 피하려면
를 사용해야합니다).
가능하면 원래 값을 소품으로 전달해야합니다.
더 많은 소품을 여러 개의 작은 구성 요소로 전달하는 구성 요소를 분해합니다.
소품의 변화를 감지하는 방법
반응은"얕은 비교 "를 사용하여 소품과 상태의 변화를 감지합니다. 구체적으로, 그것은 JavaScript 구문 - 를 사용하여 비교합니다. 그렇다면 다음 코드의 결과는 무엇입니까?
useMemo
<...> 대답은 ... - !
오른쪽 반응 후크 : 를 사용하여 불필요한 재 렌더링을 피할 수 있습니다.
그러나 및 는 "비싼"계산에 사용해야합니다. 이 예에서는 두 개의 키와 문자열 값의 단순한 객체는 "비싸지 않습니다". 다른 솔루션이 필요합니다.
원래 값을 소품으로 전달하십시오
Object.is()
가능하면 원래 값을 소품으로 전달하는 것이 가장 좋습니다. 예를 들면 :
<code class="language-javascript">Object.is(
{ hello: "world" },
{ hello: "world" },
);</code>
이 예에서는 각 키를 자식 구성 요소의 소품으로 전달하는 것이 쉽지 않습니다. 그러나 때로는 10 개 이상의 주요 값으로 큰 객체를 처리해야합니다.
다른 구성 요소 만들기 (단일 책임의 원리) false
확실한 원칙을 따르는 경우 각 소품을 처리하기 위해 여러 개의 작은 구성 요소를 작성하는 것을 고려할 수 있습니다. 또는 객체의 주요 값은 여러 구성 요소에 할당됩니다.
위 내용은 React에서 'object' 속성을 피해야 하는 이유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!