Question

除了“代码组织”这两种方法之间有什么区别吗？

我有一堆自定义输入元素，如TextInput，NumberInput等。

我直接使用它们

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允许您编写可以在Samsung上运行的函数。该状态将是HOC包含的组件之一。

示例：

使用HOC，您可以编写this.state函数，该函数将在每次组件接收道具时添加或删除组件状态的某些数据。你可以在几个组件上使用这个HOC。

HOC vs Wrapper在渲染功能中

1 个答案: