ReactJS 구성 요소가 순수한 기능처럼 작동해야하는 이유는 무엇입니까?

Question

설명서에 따르면 모든 리액션 구성 요소는 소품과 관련하여 순수한 기능처럼 작동해야합니다. https://facebook.github.io/react/docs/components-and-props.html 그러나 그 배후에있는 진짜 이유를 설명하지는 않습니다. 그 이유는 무엇입니까?

Answer 1

구성 요소 상태 변경 사항을 추적하기 때문에 나는 말할 것입니다. 순수하지 않으면 실행될 때마다 부작용이 발생합니다. 그렇게하면 무엇이 바뀌 었는지, 그리고 이러한 변화에 어떻게 반응 하는지를 아는 것은 매우 어려울 것입니다.

순수 함수는 다른 방법으로 동일한 입력으로 동일한 출력을가집니다. 속성을 관리하고 변경된 사항을 추적하기가 훨씬 쉬워 져서 변경에보다 쉽고 예측 가능한 방식으로 대응할 수 있습니다.

Answer 2

소품과 관련하여 순수한 기능이 아니라면 반박하고 의존하는 전체 계층/위임 구조를 위반하게됩니다.

구성 요소 A와 구성 요소 B의 두 구성 요소가 있고 구성 요소 A는 구성 요소 B의 부모입니다. 구성 요소 A는 일종의 데이터를 기반으로하는 자체 상태를가집니다. 그 상태의 일부를 구성 요소 B의 소품으로 전달할 때, 구성 요소 B가 해당 소품의 가치를 얻기 위해 구성 요소 A에 위임 할 두 구성 요소 사이에 계약을 설정하게됩니다.

이는 두 구성 요소 사이의 계약이며, 계약을 위반하지 않는 유일한 방법은 구성 요소 B가 전달 된 하위 요소를 직접 변경하거나 변경하지 않는다는 것입니다. 그것이 순수한 기능이라는 것은 그것이 소품을 직접 돌연변이시키지 않는다는 것을 의미합니다. 물론 소품을 복제 한 다음 변경할 수 있지만 그 시점에서 동일한 값을 참조하지 않기 때문에 계약 위반이 아니기를 바랄 수 있습니다. 그러나 소품을 직접 변이 시키면 부모 구성 요소 값을 변이시킬 수도 있습니다. 이로 인해 의도하지 않은 부작용이 발생할뿐만 아니라 반응 그림자 돔 구분 알고리즘에 문제가 발생할 수 있습니다. 여기

는 그 문서

은이 성분이 순수해야 반작용

https://facebook.github.io/react/blog/2015/02/24/streamlining-react-elements.html#problem-mutating-props-you-dont-own

Answer 3

는 이것이 props 및 state에만 의존해야 그 render 방법의 결과를 의미 공식에서 반응을 설명하고입니다 동일한 속성 및 상태 render은 동일한 결과를 제공해야합니다.

render가 순수하지 않으면 동일한 입력에 대해 다른 결과를 반환 할 수 있음을 의미하므로 React는 구성 요소의 변경 사항을 기반으로 업데이트해야하는 DOM 부분을 알 수 없습니다. 이것은 React의 성능이 이것에 달려 있기 때문에 중요합니다. 왜? 다소 복잡합니다.

상태를 기반으로 UI를 정의하고 상태의 일부가 변경 될 때마다 UI가 자체적으로 다시 렌더링되도록하는 것이 놀랍습니다. 그러나 무언가를 변경할 때마다 전체 DOM을 완전히 다시 렌더링한다고 상상할 수 있습니다. React는 DOM이 새로운 상태를 반영하는 데 필요한 최소 변경 량을 확인하여이를 해결합니다. 각 구성 요소가 수신하는 특성 및 상태에 따라 변경 사항을 판별하고 특성 또는 상태가 변경된 경우 구성 요소를 갱신해야하는지 여부를 알 수 있습니다.

우리가 8 h을 변경 여기

구성 요소 계층 구조의 예로서이 나무를 가지고, 그래서 우리는 또한 변경 f의 자식 fh 때문에, 우리는 또한 f 때문에 c 변경 c 등의 아이입니다.

여기서 핵심은 React가 구성 요소 트리를 확인하는 방법을 생각하는 것입니다. 루트에서 시작하여 변경된 것을 확인합니다. 그러면 모든 아이들을 검사하고 c 만 변경됨을 알 수 있으므로 a 및 b 브랜치를 모두 확인할 필요가 없습니다. 그런 다음 c 분기를 확인하고 f 만 변경 했으므로 e 및 g을 확인할 필요가 없습니다. 이 작업은 모든 구성 요소에서 수행되어 변경 사항의 최소 개수와 업데이트해야 할 대상을 계산합니다.

언제든지 구성 요소의 렌더링 방법을 변경할 수 있다면 React는 모든 지사와 모든 하위 항목을 확인하여 상태 및 의존 소품에 의존 할 수 없어 변경된 사항을 확인해야 함을 의미합니다 언제 지점이 바뀌었고 어떻게. 고통스럽게 느리고 전체 React 프레임 워크를 사용할 수 없게 만듭니다.

Answer 4

당신은 "왜"이해하는지 이해할 것입니다. Reconciliation algorithm 렌더링 용도로 사용합니다.

Here 당신이 원하는 것을 이해하는 데 필요한 모든 정보가 있습니다.

그 중 일부는 Marco Scabbiolo의 대답에서 잘 설명되어 있지만 React가 작동하는 방식을 이해하려면 내가 제안한 게시물을 읽는 것이 좋습니다.

이미 답변 팀에서 설명했기 때문에 여기에 답변을 게시하는 것은 게시물 및 불필요한 항목에 너무 많은 것입니다. 그래서 나는 당신에게 직접 소스를 제공하는 것을 선호합니다.