什么应该是React组件，什么应该只是HTML

Question

我正在为我的个人网站制作新主页的原型。我制作了以下钢笔：React#1的主页。

我希望网站使用React，不一定是因为它会从中受益，主要是因为我想学习React。

如果你看一下笔，你可以看到很多组件看起来就像这样：

/**
 * The main title.
 */
const Title = () => <h1 className="Title">Chuckeles</h1>;

或者这个：

/**
 * The row component. Places items, you guessed it, in a row.
 */
class Row extends React.Component {
  render() {
    return <div className="Row">{ this.props.children }</div>;
  };
};

这些组件没有任何特殊功能。它们只是隐藏了底层HTML。我的问题是。我应该有这样的组件吗？或者我应该只使用HTML标记，例如在Title组件的情况下，使用

<h1 className="Title">Chuckeles</h1>

直接？

Answer 1

这些"小"组件似乎是在浪费空间，但事实并非如此。

想象一下，明天有一位设计师想要更改你的头衔类别。如果它只是一个组件，那么它可以在那里进行更改，并且不会有任何"搜寻"来找到它的所有用法。而如果你在任何地方都内联它，那将是一场噩梦。

基本思想是让你的"最低级别"组件包含HTML，它们做"肮脏"的工作（DOM，样式），你的高级组件应该做组合和逻辑。

我尽量不将HTML类型标记和其他组件混合在一个组件中。这使得我有很多小的HTML组件，但它们很容易维护，并且我很好地分离了业务组件和表示组件。

Answer 2

你可以采用这种方法，但我更喜欢像这样传播的道具

 return <div {..this.props}>{ this.props.children }</div>; 

然后可以在其他地方重用div。

Answer 3

您在这里提到的通常被称为Dumb组件或无状态函数。它们非常好，只要有重用/增强的可能性，就应该始终优先于静态html。