HOC vs Wrapper in render function

Question

Есть ли разница между этими двумя подходами, кроме «организации кода»?

У меня есть куча пользовательских входных elemts, как TextInput, и т.д. Ввод числа

Я использую их непосредственно

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

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

и я FormInput компонент, который инкапсулирует сообщения об ошибках визуализации для любого входного компонента.

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

Я вижу две разные реализации 1) HOC

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

В вашем случае нет никаких реальных различий, но если вы хотите, чтобы делать операции в состоянии компонента, HOC позволяет вам выполнять функцию кода, которая может работать на this.state. Это состояние будет одним из компонентов, завернутых HOC.

Пример:

С HOC, вы можете кодировать componentWillReceiveProps() функции, которая будет добавлять или удалять некоторые данные о состоянии компонентов каждый раз, когда компонент получает реквизит. И вы можете использовать этот HOC для нескольких компонентов.