レンダリング機能のHOC対ラッパー

Question

"コード編成"を除いて、これらの2つの方法に違いはありますか？

私は私が直接

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

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

それらを使用して、私はすべての入力コンポーネントのレンダリングエラーメッセージをカプセル化するコンポーネントをFormInputしているなどのTextInput、NumberInput、などの

、カスタム入力elemtsの束を持っています。あなたのケースでは

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

私は2つの異なる実装 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によって包まれたコンポーネントの1つになります。

例：

HOCを使用すると、コンポーネントが小道具を受け取るたびに、追加またはコンポーネントの状態にいくつかのデータを削除しますcomponentWillReceiveProps()機能をコーディングすることができます。また、このHOCはいくつかのコンポーネントで使用できます。