Question

我正在处理一个项目，我正在使用高阶组件包装器（HOC）来绑定窗口/文档级别的事件处理。我有一些基于功能的组件，而其他组件是基于类的组件。我试图弄清楚我们如何确定是否为组件使用函数或类。作为一项规则，我使用基于类的if组件使用（简单）内部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

在这种情况下使用基于类的是否有意义？所以我可以使用渲染函数来创建子组件，并将其简单地传递给render方法。像这样，

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

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

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

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

何时决定是否在React中使用函数或类来表示哑组件？

0 个答案: