Question

想象一下这个用例：

我们有一个显示用户列表的组件。

var UserList = React.createClass({
  render: function() {
     return this.props.users.map(this.renderUserRow);
  },
  renderUserRow: function(u) {
     return <UserListRow user={u} />;
  }
});

var UserListRow = React.createClass({
 render: function() {
   var u = this.props.user;
   return <div><span>{u.firstName}</span><span>{u.lastName}</span></div>
 }
});

接下来，我们想要使用这个完全相同的组件，除了每个用户都有一个复选框（或者为每一行添加 data-user-id 属性）。如果使用Backbone，我会将UserList和UserListRow子类化并完成我的任务。

我无法在React中进行子类化，因此可以想到一些选项，每个选项都有明显的缺点：

我们可以使用 renderCheckbox 属性修改UserList。这是违反open-closed principle的教科书示例。如果许可证阻止您修改源代码怎么办？如果源代码由其他团队维护怎么办？如果代码被混淆了怎么办？
我们可以复制粘贴代码并编写不同的 renderUserRow 函数。这会导致巨大的代码重复 - 如果 UserList 长达数百个代码行会怎样？
我们可以将UserList分成 UserListMixin 和 UserListComponent 。再次 - 与第1点相同的问题 - 如果由于某种原因，您无法修改源代码，该怎么办？此外 - 如果我希望每个反应组件都可以继承，该怎么办？每次将每个组件分成混合物是非常笨拙的。

我可以为其他团队提供小部件使用 - 我无法想象某个小部件的每个可能的用例。这让我想知道 - 解决这个问题的 React方式是什么？

Answer 1

你应该记住，它是反应的第一个目标，提供不变性和可预测性。这意味着每次输出都相同的输入也是相同的（与算法的定义相似）。您还应该记住，反应对SPA结构嵌套越多越有用。

尊重这一事实，您应该以这种方式设计您的组件。

如果是您的复选框，则有“第二条道路”。我个人不会因为有时需要复选框而创建一个额外的组件。有时不。但如果它不仅仅是一个复选框，我倾向于实现另一个管理和添加这些“通用功能”的组件。

这是我如何做到这一点的答案，但你绝对正确，这会产生问题。可能这个答案在每个用例中都会有所不同 -

希望以某种方式帮助

React.js：我是否需要将每个组件分离到mixin以实现可继承性？

1 个答案: