时间戳

首页 > 解决方案 > React 组件分解策略

javascript - React 组件分解策略

问题描述

我需要在 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 并使布局更干净吗？

一个明显的选择是进入单独的组件布局内容。

谢谢

标签： javascriptreactjscomponents

解决方案

关于分解组件的指南：

  1. 当您的组件做得太多时。理想情况下，组件应该专注于做一件（或几件，但不是很多）事情。最明显的迹象是代码中的行数变得太长。粗略估计，组件不应超过 300 行。

  2. 当您想跨多个父组件重用组件时，您必须将它们分解。

  3. 如果您想通过 优化组件的render()特定子树shouldComponentUpdate()，那么您必须将它们分解，因为您只能shouldComponentUpdate()在组件级别实现。

  4. 将数据获取逻辑与渲染和处理用户交互逻辑分开。不要让一个组件同时进行数据获取和（渲染和处理用户交互），而是将它们分解为更小的组件，以便您可以单独测试这些组件：

    • 测试第一个组件是否获取数据。
    • 测试第二个组件是否正确呈现数据并且可以响应用户交互。
    • 在此处阅读有关它的更多信息

Kent C. Dodds在这里提供了更多好的答案。

推荐阅读