javascript - React 구성 요소 소품 및 상태 문제

Question

이제 여기에 아이디어가 생겼지만, 구체적으로 해본 적이 없어서 실현 가능한지는 잘 모르겠습니다. 예:

으아아아

상위 구성 요소에는 재사용된 여러 하위 구성 요소가 포함될 수 있습니다. 상위 구성 요소는 서버에서 데이터를 가져오는 역할을 담당하고 하위 구성 요소는 상위 구성 요소에서 가져온 데이터를 렌더링하는 역할을 합니다. 이것은 모두 정상입니다.
이제 하위 구성 요소에 필터링 기능이 있어야 한다는 요구 사항이 있습니다. 가장 간단한 예는 다양한 필터링 방법에 따라 다양한 데이터를 표시하는 목록 페이지입니다. 예를 들어 '10번부터 12번까지의 데이터를 모두 선택하여 표시합니다.' 데이터 작업이 상위 구성 요소에 배치되면 하위 구성 요소가 여러 번 참조되므로 상위 구성 요소가 매우 비대해집니다.
내 생각은 하위 구성 요소의 상태에 데이터를 넣고 하위 구성 요소가 스스로 관리하도록 하여 하위 구성 요소를 다시 렌더링하는 것입니다. 그런데 실제로 이런 기능적 분할을 해본 적이 없어서 전문가들에게 내 생각이 실현 가능한지 묻고 싶다. 앞으로도 제한이 없을까요?

보니까 무슨 말인지 잘 이해 못하는 분들도 있는 것 같아서 사진 올려봅니다

필터링에 따라 다른 데이터 표시

Answer 1

상위 구성 요소를 간단한 데이터 수집 구성 요소로 사용한 다음 하위 구성 요소의 setState가 렌더링된 데이터에 대해 다시 렌더링을 트리거할 수 있는 한 하위 구성 요소에 필터링된 이벤트 함수를 작성할 수 있습니다. 상위 구성 요소의 데이터를 사용한 다음 렌더링 시 필터 수행에서 필터 이후의 데이터를 사용하여 렌더링합니다.

Answer 2

father에서 네트워크 요청을 한 다음 props를 사용하여 자식 노드가 많을 수 있으며 물론 부모 노드의 데이터가 변경되면 네트워크를 계속해서 요청하는 것은 비현실적입니다. 하위 노드는 모두 단방향 데이터 흐름이므로 여기에서 업데이트할 수 있습니다.

데이터가 너무 많아서 상위 노드를 사용하여 정리하고 싶지 않다면 redux를 사용할 수도 있지만 어렵습니다.

Answer 3

하위 구성 요소는 재사용 가능성이 높아야 하며 수신 데이터에 따라 렌더링된 콘텐츠가 결정됩니다. 하위 구성 요소에는 다양한 필터링 방법을 작성할 수 있습니다. 상위 구성 요소는 필터링 방법의 데이터와 번호를 전달하고 하위 구성 요소는 이러한 조건에 따라 렌더링됩니다.

Answer 4

요구 사항 측면에서: Son拿到父组件的props，同时本地维护一份state，然后再维护一个filter state。初始化和componentWillReceiveProps상위 구성 요소가 전달한 props를 필터링하고 이를 하위 구성 요소에 setState합니다.

필터링 작업 중에 상위 구성 요소가 전달한 props를 처리하려면 필터링 함수를 다시 호출하세요. 전달된 props는 변경되지 않지만 구성 요소의 상태로 인해 필터링으로 인해 데이터 손실이 발생할 수 있기 때문입니다.

더 나아가기: 필터 조건을 만들어야 하는 경우 여러 구성 요소와 공유하거나 지속적으로 저장하세요. 여기서 redux 내에서 필터링 조건을 관리하는 것을 고려해야 합니다.

Answer 5

논리적으로 말하면 SRP(단일 책임 원칙)에 더 가까운 하위 구성 요소에 배치되어야 합니다.

Answer 6

getData(filter1,filter2,filter3), 하위 구성 요소는 filter1, filter2, filter3 매개 변수를 상위 구성 요소에 전달하고 상위 구성 요소는 매개 변수에 따라 데이터를 가져온 다음 해당 데이터를 하위 구성 요소에 전달합니다