반응 소품:오브젝트 또는 속성을 전달해야 합니까?차이가 많이 나나요?

반응 소품:오브젝트 또는 속성을 전달해야 합니까?차이가 많이 나나요?

소품을 전달할 때 전체 개체를 자식 구성 요소에 전달해야 합니까? 아니면 부모 구성 요소에서 먼저 개별적으로 소품을 만든 후 자식에게 전달해야 합니까?

전체 개체 전달:

<InnerComponent object={object} />

먼저 필요한 소품을 개별적으로 만듭니다.

<InnerComponent name={object.name} image={object.image} />

어떤 것이 좋으며, 상황에 따라 다르다면 어떤 것을 게이지로 사용하면 좋을까요?

최소 특권의 원칙에 따라 이것이 올바른 방법입니다.

<InnerComponent name={object.name} image={object.image} />

하면 제한된다.InnerComponent실수로 원래 개체를 수정하거나 해당 개체를 의도하지 않은 속성에 액세스하지 않도록 합니다.

또는 원래 객체에서 속성을 선택하여 소품으로 전달할 수 있습니다.

<InnerComponent {...pick(object, 'name', 'image')} />

나열하기 귀찮은 속성이 여러 개 있는 경우 개체를 받아들이는 단일 소품이 있을 수 있습니다.

<InnerComponent object={pick(object, 'name', 'image')} />

두 번째 예시는 소품을 개별적으로 통과시키는 것이 좋습니다.여기서 어떤 인수가 전달되었는지 명확하게 확인할 수 있으며 예상되는 인수와 빠르게 비교할 수 있습니다.이를 통해 사람들과의 협업이 훨씬 쉬워지고 애플리케이션 상태가 더욱 명확해집니다.

저는 개인적으로 필요하지 않으면 물건 전체를 통과시키지 않으려고 노력합니다.이것은 내부에 어떤 속성도 있을 수 있는 확산 연산자와 같으며 더 큰 범위에서 디버깅하는 것이 훨씬 어렵습니다.

하는 몇 가지 .prop-types ★★★★★★★★★★★★★★★★★」typescript는 큰 데이 될 수 .

JavaScript에는 유형 주석이 없기 때문에 @mstrue에서 언급한 바와 같이 두 번째 선택이 훨씬 더 유지보수가 용이합니다.그러나 유형 주석을 지원하는 TypeScript React를 사용하는 경우 두 가지 선택 모두 동일합니다.그러나 첫 번째 선택지는 뷰와 모델 간의 긴밀한 결합을 촉진합니다.이것에 의해, 타이핑을 많이 할 필요가 없기 때문에 신속한 개발이 가능하게 됩니다.두 번째 선택지는 개발의 속도를 늦출 수 있지만, 장래의 변경에 대한 유연성과 내구성이 높아집니다.

따라서 유연성보다 개발 속도를 선호하는 경우 1번, 개발 속도보다 유연성을 선호하는 경우 2번으로 선택해야 합니다.

추가 노트

좋아요, 언제가 유연성보다 개발 속도를 더 선호해야 할까요?여기 내 2센트요.

만약 당신의 프로젝트가 단기적인 사용(예를 들어 선거 기간 동안 표를 모으기 위한 앱 개발)을 의도했다면, 첫 번째 선택지를 선택하라.

프로젝트가 장기 사용(예: 온라인 은행 거래 포털)을 위한 것이라면 두 번째 선택지를 선택해야 합니다.

여러 개의 소품을 어린이 구성요소에 전달하는 것은 어린이 구성요소에 소품을 전달하는 데 선호되는 방법입니다.이렇게 하면 하위 구성 요소에서 응용 프로그램 상태를 추적하는 데 도움이 됩니다.이 '아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, prop-types it. 과 같은 시 합니다.Java의 제네릭과 같은 기능을 하며 소품 통과 시 안전성을 제공합니다.

내의 않는 은 퍼포먼스 .이러한 속성은 퍼포먼스 최적화에 도움이 되기 때문입니다.Child는 '''입니다.PureComponent할 수 있다shouldComponentUpdate이 the에서 됩니다.Child컴포넌트가 변경되면 컴포넌트는 재표시되며 오브젝트 내에서 사용되지 않는 속성이 변경되었을 때는 변경되지 않습니다.

그러나 오브젝트 내의 모든 속성을 사용하고 있는 경우 오브젝트의 돌연변이를 올바르게 처리한다면 오브젝트를 소품으로 전달해도 큰 차이는 없습니다.

즉, 그 외의 회답에 따라 다르며, 그 외의 회답에서 제기된 포인트는 모두 유효하다는 것에 동의합니다.

그 밖에도, 개개의 속성을 사용하는 경향이 있는 몇개의 포인트는 다음과 같습니다.

• 때로는 모든 자산이 필요한가 하는 질문도 아닙니다.컴포넌트의 사용을 속성의 서브셋뿐만 아니라 완전한 오브젝트만 가지고 있는 경우로 제한해야 합니까?라고 하는 질문입니다.

예를 들어, 위젯 목록의 일부로 차량의 이미지, 제조사 및 모델을 표시하는 위젯을 예로 들 수 있습니다. 전체 이미지를 표시하는 것은 합리적이지 않습니다. Car자동차 이미지, 제조사 및 모델만 표시하기 위해 사용할 수 있는 유형입니다.이 세 가지 속성만 필요합니다.

• graphql과 같은 유형의 데이터를 반환하는 속성을 제한할 수 있는 경우 컴포넌트가 항상 유형에 따라 완전히 채워진 개체에 액세스할 수 있다고 가정해서는 안 됩니다.

• 마지막으로 트리 아래로 불필요한 컴포넌트 리렌더가 발생하고 항상 전체 오브젝트가 전달됩니다.오브젝트가 갱신되면 해당 오브젝트를 소비하는 모든 아이가 리렌더됩니다.그러나 보통 원시인 아이들에게 개별 속성을 전달함으로써 불필요한 재연료를 더 잘 완화시킬 수 있습니다.

오브젝트의 요점은 유사한 속성을 캡슐화하는 것입니다.속성이 10개 정도 있고 하위 구성 요소에서 사용하려면 개체를 사용하십시오.

그러나 당신의 경우, 두 번째 예를 사용하면 자 컴포넌트의 코드가 간단해지기 때문에 제 의견은 당신의 두 번째 예를 사용하는 것입니다.

두 가지 장점을 모두 활용하려면 자녀 구성 요소 안에 필요한 소품을 파괴하기만 하면 됩니다.

다음과 같이 합니다.

function InnerComponent({ name, image }) {
  ...
}

인수에서 중괄호를 사용하지 않을 경우 다음을 수행합니다.

function InnerComponent(props) {
  const { name, image } = props;
  ...
}

그 오브젝트에 따라 다릅니다.모든 속성을 다른 컴포넌트에 전달해야 합니까?아니면... 5개의 속성 중 2개를 특정 컴포넌트에 넘겨야 할 수도 있습니다.

• 해당 속성을 모두 전달할 필요가 없는 경우,Properties~하듯이Props
• 단, 모든 속성을 함께 전달해야 한다고 100% 확신하는 경우에는 모든 속성을 전달할 것을 권장합니다.Object~하듯이Props그 경우 훨씬 더 명확한 암호로 무언가를 전달하는 것을 잊는 것을 막을 수 있기 때문입니다.예를 들어, 새 속성을 해당 개체에 추가할 때는 이미 전체 개체를 전달하고 있으므로 이 속성을 전달할 필요가 없습니다.

일부 속성을 곧 제외해야 하므로 해당 개체의 현재/미래 목적을 잘 모를 경우 사용되지 않는 일부 속성을 다른 구성 요소에 전달하는 대신 해당 개체의 속성을 개별적으로 전달하는 것이 좋습니다.

다음을 사용하여 소품을 단일 개체로 JSX 요소에 전달할 수 있습니다.React.createElement기능.

왜냐하면 각각의 JSX 원소는 단지 calling을 위한 통사적인 설탕이기 때문이다.

다음 두 줄은 반응과 동일합니다.

<Button variant={"secondary"}>Add</Button>
{React.createElement(Button, {variant: "secondary", children: "Add"})}

언급URL : https://stackoverflow.com/questions/52621169/react-props-should-i-pass-the-object-or-its-properties-does-it-make-much-diffe