1

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

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

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

但是，如果某些功能组件需要条件逻辑来根据它们拥有的道具呈现不同的子组件怎么办。

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

“但是你为什么要使用类，当同样的事情可以使用功能组件来完成的时候呢？” ..因为我遇到了一个问题，当我将组件包装在 HOC 中时，我在每个 onChange 事件上失去了输入字段的焦点。我读到这通常是因为该render函数不应该用于创建组件。它应该只传递渲染的组件。

但是由于我的功能组件中有这么多的渲染逻辑，那么创建一个类组件是否有意义，将我所有的渲染逻辑放在一个函数中并在render方法中调用这个函数。

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

4

0 回答 0