Reactjs 何时决定在React中为哑组件使用函数还是类？

我正在从事一个项目，在该项目中，我使用高阶组件包装器（HOC）为窗口/文档级别绑定事件处理。我有一些基于函数的组件，还有一些是基于类的组件。我试图弄清楚我们如何决定是否为组件使用函数或类。通常，若组件使用（简单的）内部UI状态，或者需要连接生命周期方法，我会使用基于类的方法

我的函数组件大多是纯函数，它们接受一些参数并简单地返回一个组件。这样,

const TextInput = ({value}) => {
  return <input type='text' value={value} />
}
export default TextInput

“但是，当可以使用功能组件完成同样的事情时，为什么要使用类呢？” …因为我遇到了一个问题，当我将我的组件包装到一个HOC中时，我会在每个onChange事件上失去输入字段的焦点。我了解到这通常是因为不应使用

render

函数来创建组件。它应该只传递渲染组件

但是，既然我的函数组件中有这么多的呈现逻辑，那么创建一个类组件是否有意义，将我所有的呈现逻辑放在一个函数中，并在

render

方法中调用这个函数

---

这方面的任何信息都会有所帮助。

听起来您的特定问题可能与您的HOC有关，而不是与它所包装的组件有关。您能否提供有关HOC的更多信息？听起来您的特定问题可能与您的HOC有关，而不是与它包装的组件有关。你能提供更多关于HOC的信息吗？

import {Text, Select, Radio} from '../items'
const InputType = ({value, type}) => {
  // assume that this function has a lot of ifs. else, switch, etc to assign
  // a type to RenderedItem
  let RenderedItem = null
  switch type {
    case 'text':
      RenderedItem = <Text />
    case 'select':
      RenderedItem = <Select/>
    case 'radio':
      RenderedItem = <Radio />
  }
  return RenderedItem
}
export default InputType

import {Text, Select, Radio} from '../items'
import React from 'react'
class InputType extends React.Component {
  itemTorender () {
    let component = null
    // logic to determine component to render
    ...
    return component
  }

  render () {
    {this.itemToRender}
  }
}
export default InputType