在React组件上方声明通用工具功能与将功能声明为组件的一部分

Question

在React组件上方声明函数与将函数声明为组件的一部分之间有什么区别。

组件本身具有getDisplayOptions。

class PageShoppingChannel extends React.Component {
  getDisplayOptions = (providers) => {
    const options = []
    const { isFaeSet } = this.props

    providers.forEach((item) => {
      // code here 
    })
    return options
  }


  render() {
    return (
      <Wrapper>
        <TempIllsWithInfo illsType='Orders [Red]' infoBloc={infoBlock} />
        <hr className='row-spacing--sm' />
        {this.getDisplayOptions(this.props.providers)}
      </Wrapper>
    )
  }
}

在组件之前有getDisplayOptions。

getDisplayOptions = (providers) => {
  const options = []

  providers.forEach((item) => {
      // code here 
  })
  return options
}

class PageShoppingChannel extends React.Component {
  


  render() {
    return (
      <Wrapper>
        <TempIllsWithInfo illsType='Orders [Red]' infoBloc={infoBlock} />
        <hr className='row-spacing--sm' />
        {getDisplayOptions(this.props.providers)}
      </Wrapper>
    )
  }
}

我相信在前一种情况下，该函数将附加到prototype的{​​{1}}上。这两种方法的优缺点是什么？我相信这是一个JavaScript问题，但是我的示例在做出反应，因此请原谅我在此处将两者混为一谈。