Question

对于使用redux作为状态管理和任何路由器的单页应用程序，想象一下：

使用标题中的用户的布局
用于修改用户/user
其他网页/ /foobar等。

在以下示例中，我使用了渲染道具而不是HoC，但它不是强制性的，WithUser包含请求redux操作和选择器以及用户，Foobar包含所有必需的redux操作

连接组件布局内的用户

亲：没有重复，只有一个渲染

<WithUser render={user => (
  <PageLayout user={user}>
    <Route path="/user">
      <User user={user} />
    </Route>
    <Route path="/foobar">
      <Foobar />
    </Route>
  </PageLayout>
)} />

连接组件布局外的用户

亲：？
缺点：每次页面更改时都会获取用户

// App.jsx
<div>
  <Route path="/user">
    <User />
  </Route>
  <Route path="/foobar">
    <Foobar />
  </Route>
</div>

// User.jsx
<WithUser render={user => (
  <PageLayout user={user}>
    {this.renderUser(user)}
  </PageLayout>
)} />

需要时连接组件

[编辑：] 解决方案在@germanwebdev的回答后添加

亲：分离关注点缺点：重复请求

// App.jsx
<PageLayout>
  <Route path="/user">
    <User user={user} />
  </Route>
  <Route path="/foobar">
    <Foobar />
  </Route>
</PageLayout>

// PageLayout.jsx
<header>
  <WithUser render={user => (
    <Menu user={user} />
  )} />
</header>

// User.jsx
<WithUser render={user => (
  <section>
    {this.renderUser(user)}
  </section>
)} />

Answer 1

我认为将组件生命周期与数据生命周期分离是一种有价值的做法。您似乎正在尝试找到适合您的数据生命周期的React架构（如何防止多次调用？如何优化渲染，假设我的组件在mount上获取数据？）而组件架构应该专注于回答问题React是为：组件是否清楚地了解数据的当前状态？每个组件是否都遵循单一责任原则（替换为您选择的设计支柱）？

考虑到这一点，您的组件应该只关注准确描述无论用于获取，转换或缓存数据的逻辑，如何呈现数据的当前状态。

这有利于所需的连接组件＆＃34;构建应用程序的方式。你评论说它增加了复杂性，我认为：
- 在React以外的某些数据管理逻辑中，它会产生复杂性，无论如何都不会简单，因此必须彻底处理; - 它简化了数据的使用，使组件更加清晰和自包含。

总结一下：您不应该尝试使用特定的React架构来解决数据管理问题，而是根本不考虑React，然后使用众所周知的连接器模式在数据更新时更新视图。在需要时连接组件＆＃34;例子就是要走的路。

Answer 2

第一种解决方案类型失败了由redux处理状态的目的。在这么小的例子中，它可能并不那么明显，但它会在更复杂的应用程序中很快显现出来。通过深度嵌套的组件树向下传递状态变得非常乏味。

第二种变体的主要（也可能是最大）专业人员之一是，只有真正关心用户数据的组件才需要连接到redux状态，只有那些会在状态发生变化时重新呈现。在您的第一个示例中，这将是应用程序根目录，这意味着每次redux中的某些内容都会更改您的整个应用程序重新呈现。

如何组织反应连接的组件

连接组件布局内的用户

连接组件布局外的用户

需要时连接组件

2 个答案: