Question

我正在为我的个人网站制作新主页的原型。我制作了以下笔：Homepage on 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

看起来这些＆＃34;小＆＃34;组件是浪费空间，但它们不是。

想象一下，明天其中一位设计师想要改变你的标题类。如果它只是一个组件，它可以在那里更改，并且不会有任何＆＃34;搜索＆＃34;找到它的所有用法。如果你在任何地方都有内联，这将是一场噩梦。

基本的想法是让你的最低水平＆＃34;组件包含HTML，他们执行＆＃34;脏＆＃34;工作（DOM，样式），你的更高组件应该做组合和逻辑。

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

Answer 2

你可以采用这种方法，但我更喜欢使用道具来传播它：

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

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

Answer 3

这里提到的通常被称为哑组件或无状态功能。它们非常精细，并且应该始终优于静态HTML，只要有重复使用/增强的可能性。

什么应该是React组件，什么应该只是一个HTML？

3 个答案: