reactjs - 最佳实践 : encapsulate components or compose deeply using props. child

Question

我面临着如何构建组件的决定，我想知道社区是否对最佳实践有任何想法。

1:封装组件以隐藏细节。

所有者渲染:

<List ... />

列表渲染:

<Item ... />

项目渲染:

<div>...</div>

在此版本中，组件的可重用性不太好，因为它们了解很多域详细信息。所有者对列表中的项目一无所知。

2:将组件嵌套在顶部、有状态 View Controller 的深处

所有者渲染:

<List>
  <Item>
    <div>...</div>
  </Item>
</List>

在此版本中，所有者知道其子级的所有组成，但组件本身并不是很有用，因为它们对域一无所知。然而，它们更可重用。

3:将通用组件封装在特定领域组件中

这是选项 1 和选项 2 的混合

所有者渲染:

<DomainList ... />

DomainList 呈现:

<List ...>
  <DomainItem .../>
</List>

DomainItem 呈现:

<Item ...>
   ...
</Item>

所有者对通用 List、DomainItem 或通用 Item 一无所知。

哪种方法更好？有人在这些方法中取得过成功或失败吗？发生了什么？

Answer 1

组件的可重用性并不因为它们规定了有关如何呈现的大部分内容而降低。您甚至可以说它们更具可重用性，因为使用它的组件不需要知道它如何呈现的任何信息。

当你开始思考这些事情时，很容易陷入分析瘫痪状态。我创建 React 组件的方法是:

1. 尽量避免在组件中包含状态，并将状态作为 props 传递，而不是从层次结构中的更高层传递。
2. 仅将 this.props.children 用于不知道其中包含什么内容的包装器组件。一般的东西，如弹出窗口、选项卡 View 等。
3. 不要开始将内容提取到其他组件中，因为“我稍后可能会在其他地方重用它”。相反，只有当我知道我在其他地方需要它时，我才会提取它。
4. 我尝试像组件的用户一样思考，而不是像该组件的作者一样思考。问自己这样的问题:“我想如何将数据传递给这个组件？”，“当这个组件发生变化时，是否需要提醒该组件的用户？”，“使用这个组件时我需要多大的灵 active ？” 。不过，概括起来很容易走得太远，所以我也尽量不要抽象太多。

我倾向于看到两种不同类型的组件。通用目的的东西要么非常通用，以至于我可以在项目之间或特定于应用程序之间重用它们，但足够通用，以至于我会在应用程序的不同部分中出于不同目的大量使用它们。然后是具有非常特定用途的特定组件，例如“呈现此待办事项列表”或“呈现此表单以编辑待办事项”。这些往往使用通用组件，但绝对不是相反。

当我开始创建组件时，我通常很清楚它将属于哪种类型。对于通用组件，我倾向于使它们尽可能灵活和开放。对于特定目的的，我让它们更像黑匣子，有点像“只要给我数据，我就会从那里获取它”。因为它们具有非常具有描述性的名称，并且知道有关如何呈现自身的所有知识，所以在阅读使用它们的代码时很容易理解发生了什么。

在您的示例中，我想说 List 组件是通用组件，我肯定希望使其灵活。我可能还会有一个用于我正在构建的列表的特定组件，例如 TodoList ，可能看起来像这样:

var TodoList = React.createClass({
  render() {
    return (
      <List>
        {this.props.todos.map(todo => <ListItem>{todo.text}</ListItem>)}
      </List>
    );
  }
});

另一种选择是这样的:

var ListItem = React.createClass({
  render() {
    return <li>{this.props.item.text}</li>;
  }
});

var TodoList = React.createClass({
  render() {
    return <List items={this.state.items} listItemComponent={ListItem} />;
  }
});

在本例中，List 组件会迭代所有项目，并使用传递的 listItemComponent 组件来呈现这些项目。

TL;DR

首先制作了解很多的非常具体的组件，然后当您看到要重用的用例时将它们重构为更通用。