이 질문은 구현보다는 React가 변경 사항을 처리하고 반응하는 방법에 대해 자세히 알아보기 위한 것이므로 immutable-props-apprach를 조금 개발하도록 하겠습니다.
배열의 첫 번째 요소를 가져와 구성 요소에 prop으로 전달된 원래 배열에서 제거하려고 합니다.
으아악shift() 메소드 정의에서::
shift() 메서드는 배열에서 첫 번째 요소를 제거하고 제거된 요소를 반환합니다. 이 메서드는 배열의 길이를 변경합니다.
이제 elementFromArray 변수에 배열의 요소가 포함되어 있지만 배열은 완전하고 어떤 식으로든 영향을 받지 않으며 여전히 모든 요소를 포함합니다.
그런데 이게 어떻게 가능할까요? React는 참조로 props를 전달해야 하므로 원본 배열이 영향을 받아야 합니다. React가 몇 가지 보호 조치를 취하면 해당 변경 사항이 상위 항목에 반영되지 않을 것이라는 점을 이해합니다. 하지만 여전히 변경 사항이 하위 항목에 반영되기를 바랍니다. 이 동작을 설명하는 데 유용한 것을 찾을 수 없습니다. 대부분의 리소스에서는 props에 대한 불변 메서드와 해결 방법을 찾는 방법만 언급하고 그 뒤에 있는 이유나 논리는 언급하지 않습니다.
이제 elementFromArray 변수에 배열의 요소가 포함되어 있지만 배열은 완전하고 어떤 식으로든 영향을 받지 않으며 여전히 모든 요소를 포함합니다. 그러나 Push() 메서드를 사용하면 변경 사항이 반영되고 arrayToChange에 요소가 하나 더 포함됩니다.
내 질문은 - 왜 arrayToChange가 이러한 메소드에 다르게 반응합니까? Shift()가 내용을 변경하지 않으면 push()도 변경되지 않기를 바랍니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
코드 조각의 동작은 렌더링 프로세스를 너비 우선 알고리즘으로 생각하면 설명할 수 있습니다.
JSX는 다음을 변환합니다:
으아악다음 JavaScript를 입력하세요:
으아악React.createElement(ChildShowArray, { array: letter })创建一个不会立即调用ChildShowArray구성 요소의 구조. 렌더러가 요청할 때만 실행되는 일종의 중간 구조/객체를 생성합니다.하위 구성 요소의 코드가 실행되기 전에 실행하려면
{...}（JSX 上下文）中的 JavaScript 直接作为参数传递，因此直接解析。这意味着Parent中的所有{JSON.stringify(letters)}에 배치하세요.상위 구조 구축이 완료되면 렌더러는 각 중간 구조/객체에 액세스하여 렌더링을 요청합니다. 이는 위에서 아래로 수행되므로 첫 번째
ChildShowArray渲染仍然显示完整数组的原因。然后渲染ChildChangeArray并删除第一个元素。第二个ChildShowArray렌더링이 이러한 변경 사항을 반영하고 첫 번째 요소 없이 렌더링됩니다.참고하세요,
shift()确实会更改letters的内容，但是当调用它时，Parent的内容已经呈现并且不再变化。此更改确实会影响下一次渲染的Parent(스니펫에서 "렌더링" 버튼을 클릭하세요). 또한 동일한 배열 참조를 사용하는 그 아래의 다른 하위 구성요소 렌더링에도 영향을 줍니다.질문이 무엇인지 잘 모르겠지만 여기서 추측을 해볼 예정이니 여기에 댓글을 남겨주시면 투표 전에 변경해 드리겠습니다.
내 생각에는 자녀 구성 요소에서 다음을 시도해 봐야 할 것 같습니다.
으아악그런 다음 "data"를 사용하여 jsx
의 출력에 매핑합니다.그런 다음 상위 구성 요소에서 arrayToChange를 이동합니다. useEffect를 배열 길이가 변경될 때 실행되는 "관찰자"로 생각할 수 있습니다.