Question

作为一个非常基本的例子，想象一下我想在render（）方法之外渲染一个包含一些文本的div。哪个选项会更好？

Support: support contract
    Supportid
    Term
    SuportLevel
    ...
Support <-> Line
    Supportid: FK to Support.Supportid
    Lineid: FK to Line.Lineid

或

class StatefulComponent extends Component {
  ...

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

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

或者你会将无状态组件完全拉入自己的类中吗？或者它根本不重要？是否让测试变得更容易？可读性？有什么不同吗？

Answer 1

在显示的内容方面没有任何区别。但是，它肯定会改变代码的结构和可读性。

对于我自己，我尝试将结构划分为尽可能多的组件，Thinking in react建议也是如此。但是，如果您认为该元素在结构上与其父组件没有区别，因此不值得拥有自己独立的组件，但您需要一些可读性和可重用性，那么顶级代码就可以工作。

Answer 2

在我看来，第一个看起来更简洁。你可以在方法中渲染html，如果它不是一个大代码，或者只是组件内的条件渲染。每当你有一些具有大结构和一些功能的html渲染时，将它分成适当的组件总是好的，因为你可能会在以后重用这些代码。再说一遍：如果它不是一个很大的代码或功能，那么在方法中使用html渲染是可以的。

无状态功能组件与有状态组件中的其他渲染方法？

2 个答案: