Question

我需要在React上实现组件树。

我想知道什么是足够好的模式如何破坏树中的所有内容但要考虑扩展（代码或团队）。

通常我正在使用下一种方法：

function UserAvatar(props) {
  return <div><img src="" alt="" /></div>   
}

function UserEmail(props) {
  return <div>e-mail: some@email.com</div>   
}

function UserSection(props) {
  return (
    <div className="container">
      <div className="section">
        <UserAvatar />
      </div>
      <div className="section">
        <UserEmail />
      </div>
    </div>
  );
}

但是我应该避免所有这些布局div并使布局更整洁吗？

一个明显的选择是转移到单独的组件布局中。

谢谢

Answer 1

分解组件的准则：

您的组件执行过多操作时。理想情况下，组件应专注于做一件（或几件，但不是很多）的事情。最明显的迹象是代码中的行数过长。粗略估计，组件不应超过300行。
当您想在多个父组件之间重用组件时，必须将它们分解。
如果要通过render()优化组件的特定子树的shouldComponentUpdate()，则必须将它们分解，因为您只能在组件上实现shouldComponentUpdate()级。
将数据获取逻辑与呈现和处理用户交互逻辑分开。不必使一个组件同时进行数据获取和（呈现和处理用户交互），而是将它们分解为较小的组件，以便您可以分别测试这些组件：
- 测试第一个组件是否获取数据。
- 测试第二个组件是否正确呈现了数据并可以响应用户交互。
- 详细了解here

肯特C.多德斯here还提供了许多更好的答案。

Answer 2

优良作法是将每个Component保留在自己的文件中，然后将它们导入需要引用的位置。

此外，在您的示例中，最有可能需要将头像网址和电子邮件设置为props。然后使UserAvatar和UserEmail呈现值。另外，设置propTypes是一个好习惯，这样其他开发人员（和您自己）就会知道要传递哪些道具。

将组件分解为子组件的一个标准是它们处理不同的问题时，或者文件大小变得太大时。另一个条件是何时需要在其他情况下重新使用该组件。

希望这会有所帮助。

反应组件故障策略

2 个答案: