React: "props.children"에 관한 질문

에 만든 2018년 05월 26일 · 6코멘트 · 출처: facebook/react

기능 을 요청하거나 버그를보고 하시겠습니까?
그냥 질문

props.children에 관한 몇 가지 질문

React.Children 의 공식 React 문서에서 this.props.children 는 "불투명 한 데이터 구조"라는 것을 읽을 수 있습니다.
이것이 정확히 무엇을 의미합니까?

props.children 데이터 구조의 투명성에는 일반적으로 세 가지 가능성이 있다고 생각합니다.

사례 1 : `props.children` 데이터 구조의 모든 측면이 개방적이고 잘 정의되어 있습니다.

이것이 옳다면 "불투명 한 데이터 구조"라는 용어는 완전히 잘못된 것입니다.
따라서 "Case 1"은 분명히 사실이 아닙니다.

사례 2 : `props.children` 데이터 구조의 측면이 열려 있거나 명확하지 않습니다.

즉, 사용할 때마다 것을 의미 props.children 당신은 항상와 함께 사용할 필요가 React.Children 로 React.Children 유일 (정말 단 하나, mmmh?) props.children 의 실제 데이터 구조를 아는 사람.

그러나 그것은 사용이 허용되지 않아야 함을 의미합니다.

javascript // This is used almost everywhere (even in the official React documentation) <div>{this.props.children}</div>

...도 아니다

javascript // This is often seen with the "Function as child" pattern MyComponent.propTypes = { children: PropTypes.func.isRequired, };

두 가지 예가 모두 매우 일반적이기 때문에 "Case 2"도 분명히 그렇지 않은 것 같습니다.

사례 3 : `props.children` 데이터 구조의 일부 측면이 개방적이고 잘 정의되어 있습니다.

그러면 "Case 2"의 예 중 하나 또는 둘 다가 유효 할 가능성이 열립니다.
그러나 그것은 props.children 의 어떤 측면이 잘 정의되어 있고 어떤 측면이 정말로 불투명한지 정확한 사양이 있어야한다는 것을 의미합니다.
React 문서에서 뭔가를 놓쳤을 수도 있지만 실제로 정확히 지정되어 있지 않다고 생각합니다.

마지막으로 추가 질문 :

일부 자식 (하나 이상)이있는 경우 props.children 가 정확히 배열이 아닌 이유는 무엇입니까 (예 : "Preact"에서 수행됨)? 그렇게하면 일이 훨씬 더 쉬워 지겠죠?

설명에 대해 미리 감사드립니다.

Question

출처

mcjazzyfunky

가장 유용한 댓글

_ 불투명 한 데이터 구조 _는 children 가 배열, 조각, 단일 요소, 문자열 리터럴 등 많은 항목이 될 수 있다는 사실을 나타냅니다.

_React.Children_에는 다양한 종류의 children _ 통일 된 방식으로 _ 작업 할 수있는 몇 가지 메서드가 포함되어 있으며, 이것이 그들과 상호 작용하는 유일한 방법은 아닙니다.

일부 자식 (하나 이상)이있는 경우에 props.children이 정확히 배열이 아닌 이유는 무엇입니까 (예를 들어 "Preact"에서 수행됨)?

JSX에 속기가 있다는 사실 외에 children 는 다른 속성과 같습니다. 실제로 다음과 같이 지정할 수 있습니다.

<Component children={...}/>

React가 DOM을 업데이트해야 할 때 두 개의 단일 항목 배열이 동일한 지 여부를 두 개의 기본 값 (예 : 문자열)이 동일한 지 여부를 알려주는 것이 훨씬 더 비쌉니다.

즉, React.Children 문서가 약간 확장 될 수 있다고 생각하지만 reactjs / reactjs.org 저장소에 기록하는 것이 문제입니다.

이 기사 는 일을 약간 명확히 할 수 있습니다.

danburzo 에 2018년 05월 28일

👍4

모든 6 댓글

_ 불투명 한 데이터 구조 _는 children 가 배열, 조각, 단일 요소, 문자열 리터럴 등 많은 항목이 될 수 있다는 사실을 나타냅니다.

일부 자식 (하나 이상)이있는 경우에 props.children이 정확히 배열이 아닌 이유는 무엇입니까 (예를 들어 "Preact"에서 수행됨)?

JSX에 속기가 있다는 사실 외에 children 는 다른 속성과 같습니다. 실제로 다음과 같이 지정할 수 있습니다.

<Component children={...}/>

즉, React.Children 문서가 약간 확장 될 수 있다고 생각하지만 reactjs / reactjs.org 저장소에 기록하는 것이 문제입니다.

이 기사 는 일을 약간 명확히 할 수 있습니다.

danburzo 에 2018년 05월 28일

👍4

귀하의 답변과 설명에 대해 @danburzo 에게 감사드립니다.
귀하의 답변 후, 제가 "불투명"이라는 단어를 완전히 오해 한 것이 분명합니다.
React 문서는 props.children 의 데이터 구조가 완전히 잘 정의 된 공용체 유형이며 구체적인 표현이 다양하다고 말하고 싶었습니다 (유니온 유형은 항상 그렇듯이).

똑같은 주제를 다룬 오래된 문제를 방금 찾았습니다. 변경 사항이 어떻게되었는지 궁금하십니까?!? (나는 reactjs.org => reactjs / reactjs.org # 914에서 문제를 열었습니다) :

https://github.com/facebook/react/pull/6018/files/91223423410f107ff83a8a6ce3158c488247292f?short_path=ef51787#diff -ef51787305cfed62f6f564284762d4de

그럼에도 불구하고 두 번째 질문을 다시하고 싶습니다.
정확히 하나의 자식이있는 경우 "props.children"이 배열이 아닌 이유는 무엇입니까? 또는 일반적으로 컬렉션을 기대하는 "토큰")?
정말 성능상의 이유입니까? 아래의 "checkResult"계산에 시간이 많이 걸리는 것을 알 수 없습니다.

const
  child1 = ...,
  child2 = ...,
  child1IsArray = Array.isArray(child1),
  child2IsArray = Array.isArray(child2),

  checkResult = child1IsArray && child2IsArray
     && child1.length === 1 && child2.length === 1
     && child1[0] === child2[0];

다시 요청하는 것이 약간 짜증나는 것처럼 보이면 죄송합니다.하지만 그 디자인 결정에 대한 정확한 이유를 알고 싶습니다 ....

mcjazzyfunky 에 2018년 05월 28일

👍1

질문의 첫 부분을 도와 드릴 수있어서 기쁩니다! 불행히도 단일 자식이 단일 항목 배열로 표시되지 않는 이유에 대해서는 _exact_ 대답이 없습니다. 그러나 나는 당신이 (JSX 속기보다는) 정상적인 소품으로 단일 아이를 여전히 유효하게 전달할 수 있다는 점을 지적하려고 노력하고 있었는데, 이는 내가 실수로 성능과 관련이 있다는 내 가설을 모호하게 만들었다는 사실입니다.

danburzo 에 2018년 05월 29일

@danburzo 귀하의 답변에 다시 한 번 감사드립니다.

음, 솔직히 React 팀의 누군가가 그 디자인 결정의 실제 이유를 기억하기를 바랐습니다.
React에서 children prop 처리와 관련된 미묘한 문제가 있기 때문입니다.
예를 들어 React 초보자에게 다음 예제의 Test1 및 Test2 구성 요소가 동일하게 작동하는지 물어 봅니다 (React pro로서 사용자는 대답이 "no"임을 알고 있습니다. => Test2는 DEV에 누락 된 키에 대해 경고하고 Test1은 아닙니다-그러나 이것이 당신이 초보자라면 기대할 수있는 것입니까?!?)

const
  h = React.createElement,
  Test1 = () => h('div', null, h('br'), h('br')),
  Test2 = () => h('div', { children: [h('br'), h('br')] });

ReactDOM.render(
  h('div', null, h(Test1), h(Test2)),
  document.getElementById('container')
);

그건 그렇고 : Test2가 허용된다면, 예를 들어 하이퍼 스크립트 기능과 같은 createElement 대체를 구현하는 경우 약간의 성능 이점이 있습니다.

또 다른 예 : 모든 어린이가 특정 조건을 충족해야하는 경우 "children : PropTypes ...."가 어떻게 생겼는지 React 초보자에게 물어보십시오. (적어도 초보자에게는) 대답하기 쉽지 않을 것이라고 생각합니다.

React 팀에게 : 문제의 디자인 결정에 대한 이유가 실제로 알려지지 않았거나 단순히 취향의 문제 였다면 물론이 문제를 종결해도됩니다.

mcjazzyfunky 에 2018년 05월 29일

불필요한 배열 할당을 피하기 위해 단일 자식에 대해 배열을 사용하지 않기로 결정했다고 가정합니다.

React에서 children prop 처리와 관련된 미묘한 문제가 있기 때문입니다.

일반적으로 명시적인 children 소품을 사용하지 않는 것이 좋습니다. 대부분의 사용자는 React.createElement 를 직접 호출하는 대신 JSX도 사용하므로 언급 한 문제는 일반적으로 문제가되지 않습니다.

aweary 에 2018년 06월 24일

@aweary 답변 주셔서 감사합니다

mcjazzyfunky 에 2018년 06월 24일

이 페이지가 도움이 되었나요?

0 / 5 - 0 등급

React: "props.children"에 관한 질문

props.children에 관한 몇 가지 질문

사례 1 : props.children 데이터 구조의 모든 측면이 개방적이고 잘 정의되어 있습니다.

사례 2 : props.children 데이터 구조의 측면이 열려 있거나 명확하지 않습니다.

사례 3 : props.children 데이터 구조의 일부 측면이 개방적이고 잘 정의되어 있습니다.