無狀態功能組件與有狀態組件中的其他渲染方法？

Question

作為一個非常基本的例子，想象一下我想渲染一個div，該div包含我的render（）方法之外的一些文本。 這些選項中哪個更好？

class StatefulComponent extends Component {
  ...

  render() {
    return (
      {this.renderTextDiv(this.state.text)}
    )
  }

  renderTextDiv(text) {
    return <div>text</div>
  }
}

要么

class StatefulComponent extends Component {
  render() {
    return (
      <TextDiv text={this.state.text} />
    )
  }
}

function TextDiv({text}) {
  return <div>{text}</div>;
}

還是將無狀態組件完全拉入自己的類？ 還是根本沒有關系？ 是否會使測試更容易？ 可讀性？ 有什么區別嗎？

Answer 1

在顯示內容方面沒有任何區別。 但是，它肯定會更改代碼的結構和可讀性。

對於我自己，我嘗試將結構盡可能地分成多個組件，“ 思考”也暗示了這一點。 但是，如果您認為該元素在結構上與其父組件沒有什么不同，因此不應該擁有其自己的單獨組件，但是您需要某種可讀性和可重用性，那么頂層代碼就可以工作。

Answer 2

我認為第一個看起來更簡潔。 如果代碼不是很大的代碼，或者僅是組件內部的條件渲染，則可以在方法中渲染html。 只要您有一些具有較大結構和某些功能的html呈現，將其分成適當的組件總是很好的，因為您稍后可能會重用此代碼。 再說一遍：如果不是很大的代碼或功能，則可以在方法內部使用html呈現。