소품으로 전달된 배열이 변경 사항을 반영하지 않습니다.

Question

이 질문은 구현보다는 React가 변경 사항을 처리하고 반응하는 방법에 대해 자세히 알아보기 위한 것이므로 immutable-props-apprach를 조금 개발하도록 하겠습니다.

배열의 첫 번째 요소를 가져와 구성 요소에 prop으로 전달된 원래 배열에서 제거하려고 합니다.

으아악

shift() 메소드 정의에서::

shift() 메서드는 배열에서 첫 번째 요소를 제거하고 제거된 요소를 반환합니다. 이 메서드는 배열의 길이를 변경합니다.

이제 elementFromArray 변수에 배열의 요소가 포함되어 있지만 배열은 완전하고 어떤 식으로든 영향을 받지 않으며 여전히 모든 요소를 ​​포함합니다.

그런데 이게 어떻게 가능할까요? React는 참조로 props를 전달해야 하므로 원본 배열이 영향을 받아야 합니다. React가 몇 가지 보호 조치를 취하면 해당 변경 사항이 상위 항목에 반영되지 않을 것이라는 점을 이해합니다. 하지만 여전히 변경 사항이 하위 항목에 반영되기를 바랍니다. 이 동작을 설명하는 데 유용한 것을 찾을 수 없습니다. 대부분의 리소스에서는 props에 대한 불변 메서드와 해결 방법을 찾는 방법만 언급하고 그 뒤에 있는 이유나 논리는 언급하지 않습니다.

이제 elementFromArray 변수에 배열의 요소가 포함되어 있지만 배열은 완전하고 어떤 식으로든 영향을 받지 않으며 여전히 모든 요소를 ​​포함합니다. 그러나 Push() 메서드를 사용하면 변경 사항이 반영되고 arrayToChange에 요소가 하나 더 포함됩니다.

내 질문은 - 왜 arrayToChange가 이러한 메소드에 다르게 반응합니까? Shift()가 내용을 변경하지 않으면 push()도 변경되지 않기를 바랍니다.

Answer 1

으아악 으아악 으아악

코드 조각의 동작은 렌더링 프로세스를 너비 우선 알고리즘으로 생각하면 설명할 수 있습니다.

JSX는 다음을 변환합니다:

으아악

다음 JavaScript를 입력하세요:

으아악

React.createElement(ChildShowArray, { array: letter }) 创建一个不会立即调用 ChildShowArray 구성 요소의 구조. 렌더러가 요청할 때만 실행되는 일종의 중간 구조/객체를 생성합니다.

하위 구성 요소의 코드가 실행되기 전에 실행하려면 {...} （JSX 上下文）中的 JavaScript 直接作为参数传递，因此直接解析。这意味着 Parent 中的所有 {JSON.stringify(letters)}에 배치하세요.

상위 구조 구축이 완료되면 렌더러는 각 중간 구조/객체에 액세스하여 렌더링을 요청합니다. 이는 위에서 아래로 수행되므로 첫 번째 ChildShowArray 渲染仍然显示完整数组的原因。然后渲染 ChildChangeArray 并删除第一个元素。第二个 ChildShowArray 렌더링이 이러한 변경 사항을 반영하고 첫 번째 요소 없이 렌더링됩니다.

참고하세요, shift() 确实会更改 letters 的内容，但是当调用它时，Parent 的内容已经呈现并且不再变化。此更改确实会影响下一次渲染的Parent (스니펫에서 "렌더링" 버튼을 클릭하세요). 또한 동일한 배열 참조를 사용하는 그 아래의 다른 하위 구성요소 렌더링에도 영향을 줍니다.

Answer 2

질문이 무엇인지 잘 모르겠지만 여기서 추측을 해볼 예정이니 여기에 댓글을 남겨주시면 투표 전에 변경해 드리겠습니다.

내 생각에는 자녀 구성 요소에서 다음을 시도해 봐야 할 것 같습니다.

으아악

그런 다음 "data"를 사용하여 jsx

의 출력에 매핑합니다.

그런 다음 상위 구성 요소에서 arrayToChange를 이동합니다. useEffect를 배열 길이가 변경될 때 실행되는 "관찰자"로 생각할 수 있습니다.