React 제어 구성 요소와 제어되지 않는 구성 요소는 무엇입니까?

101

ReactJS에서 제어되는 구성 요소와 제어되지 않는 구성 요소는 무엇입니까? 서로 어떻게 다른가요?

reactjs react-component

— 신
소스

재개 점을 추천합니다. 사실 상당히 정확한 질문입니다. 너무 광범위하다고 생각할 수 있는지 확실하지 않습니다.

— Charlie Flowers

127

이것은 상태 저장 DOM 구성 요소 (양식 요소)와 관련이 있으며 React 문서는 차이점을 설명합니다.

제어 구성 요소 를 통해 전류 값을 취하고 하나 props에 통지 변경 등을 통해 콜백 onChange. 부모 구성 요소는 콜백을 처리하고 자체 상태를 관리하고 제어 된 구성 요소에 소품으로 새 값을 전달하여 "제어"합니다. 이것을 "dumb component"라고 부를 수도 있습니다.
통제되지 않은 구성 요소 를 저장 자신의 상태가 내부적으로, 당신은을 사용하여 DOM을 조회하는 것이 하나입니다 ref당신이 그것을 필요로 할 때 현재 값을 찾을 수 있습니다. 이것은 전통적인 HTML과 좀 더 비슷합니다.

대부분의 기본 React 양식 구성 요소는 제어 및 제어되지 않은 사용을 모두 지원합니다.

// Controlled:
<input type="text" value={value} onChange={handleChange} />

// Uncontrolled:
<input type="text" defaultValue="foo" ref={inputRef} />
// Use `inputRef.current.value` to read the current value of <input>

대부분 (또는 모든) 경우에 제어 된 구성 요소를 사용해야합니다 .

— Aaron Beall
소스

가치가 state아니라 오히려 받아 들여지지 props않습니까?

— Ivanka Todorova

@IvankaTodorova 제어 된 구성 요소의 경우 값이를 통해 전달됩니다 props. 제어되지 않는 구성 요소는 state내부적으로 값 자체를 제어하는 데 사용 됩니다. 이것이 주요 차이점입니다.

— Aaron Beall

차이점은 값이 설정 / 전달되고 콜백이있는 구성 요소가 호출된다는 것입니다 controlled components( <input type="text" value="value" onChange={handleChangeCallbackFn} />)와 입력 요소가 자체 값을 처리하고 refs호출 된 uncontrolled components( <value type="text" />)을 통해 읽을 수있는 기존 HTML과 비교 됩니다. 제어되는 구성 요소는 setState부모 구성 요소를 통해 자체 상태를 관리 하거나 소품으로 가져옵니다.

— Lior Elrom

defaultValue소품 을 통해 가져 오지만 컨트롤러에 알리는 구성 요소를 어떻게 호출 onBlur합니까?

— Paul Razvan Berg

@PaulRazvanBerg 안티 패턴처럼 들리지만, 상태는 한 곳에서 제어되어야합니다 . 일반적으로 상태 를 가장 가까운 공통 조상으로 끌어 올립니다 .

— Aaron Beall

제어 된 구성 요소는 콜백을 사용하여 변경 사항에 대해 다른 구성 요소에 알립니다. 예 : <Button onClick={() => console.log("clicked")}>Click</Button>.
제어되지 않은 구성 요소는 변경 사항에 대해 다른 구성 요소에 알리지 않으며 참조를 사용하여 구성 요소에 액세스 할 수 있습니다. HTML 요소의 실제 돔에 액세스해야하는 경우 Ref가 유용 할 수 있습니다.

— 쇼베
소스