HOC 대 래퍼 (Wrapper) 렌더링 기능

Question

"코드 구성"을 제외하고 이러한 두 가지 접근 방식에는 차이점이 있습니까?

나는 등의 TextInput, NumberInput,

처럼 그들에게 직접

const TextInput = (props) => <input type="text" {...props} /> 

const App = (mainProps) => <div> 
    <TextInput {...props} errors={['error text']} /> 
</div> 

를 사용하고 난 어떤 입력 구성 요소에 대한 렌더링 오류 메시지를 캡슐화 구성 요소를 FormInput 한 사용자 정의 입력 elemts의 무리가 있습니다.

const FormInput = (props) => <div> 
    // Render input here 
    <span>{props.errors.join(', ')}</span> 
</div> 

나는 볼이

const FormInputHOC = (C) => { 
    const FormInput = (props) => <div> 
    <C {...props} /> 
    <span>{props.errors.join(', ')}</span> 
    </div> 
} 

export default FormInputHOC(TextInput) 

2) 래퍼 귀하의 경우에는

const FormInput = (props) => <div> 
    {props.children} 
    <span>{props.errors.join(', ')}</span> 
</div> 

const TextInput = (props) => <FormInput errors={props.errors}> 
    <input type="text" {...props} /> 
</FormInput> 

Answer 1

가, 거기에 진짜 차이가 없지만, 1) HOC 다른 구현 당신이 작업을 수행 할 때 구성 요소 상태에서 HOC을 사용하면 this.state에서 작동 할 수있는 기능을 코드 할 수 있습니다. 이 상태는 HOC에 의해 래핑 된 구성 요소 중 하나가됩니다.

예 :

HOC으로, 당신은 구성 요소가 소품을받을 때마다 추가하거나 구성 요소의 상태에 대한 몇 가지 데이터를 제거하는 componentWillReceiveProps() 기능을 코딩 할 수 있습니다. 그리고이 구성 요소를 여러 구성 요소에 사용할 수 있습니다.