Performance React Redux应用程序真的能像主干网那样扩展吗？即使重新选择。移动电话

在Redux中，对存储的每次更改都会在所有连接的组件上触发一个

notify

。这使开发人员的工作变得非常简单，但是如果您有一个具有N个连接组件的应用程序，并且N非常大，该怎么办

对存储的每次更改，即使与组件无关，仍然会在存储的

重新选择

ed路径上通过简单的

==

测试运行

shouldComponentUpdate

。很快，对吗？当然，也许一次。但是每改变N次？这种设计上的根本性变化让我质疑Redux的真正可伸缩性

作为进一步的优化，可以使用

\uu.debounce

批处理所有

notify

调用。即便如此，让N

==

测试每一次存储更改并处理其他逻辑（例如视图逻辑）似乎是达到目的的一种手段

我正在开发一个拥有数百万用户的健康和健身社交移动网络混合应用程序，并且正在从主干网过渡到Redux。在此应用程序中，用户将看到一个可切换的界面，该界面允许用户在不同的视图堆栈之间导航，类似于Snapchat，但每个堆栈的深度是无限的。在最流行的视图类型中，无休止的滚动条可以有效地处理提要项的加载、渲染、附加和分离，就像帖子一样。对于一个忙碌的用户来说，滚动浏览数百或数千篇文章，然后输入一个用户的提要，然后输入另一个用户的提要，等等，这种情况并不少见。即使进行了大量优化，连接的组件数量也会非常多

另一方面，主干网的设计使每个视图都能精确地聆听影响它的模型，从而将N减少到一个常数

---

我是否遗漏了一些东西，或者Redux在大型应用程序中存在根本性缺陷？

这可能是一个比您想要的更一般的答案，但从广义上讲：

Redux文档的建议是连接组件层次结构中相当高的React组件。这样可以管理连接的数量，然后您可以将更新的道具传递到子组件中

React的部分功能和可伸缩性来自于避免渲染不可见的组件。例如，我们不在DOM元素上设置

不可见的
类，而是在React中根本不渲染组件。对未更改的组件重新招标也不是问题，因为虚拟DOM差异化过程优化了低级DOM交互

---

这不是Redux IMHO固有的问题

顺便说一句，不要试图同时渲染100k组件，而应该尝试使用类库或类似的东西来伪造它，并且只渲染列表中的可见（或接近）项。即使您成功地渲染和更新了100k列表，它仍然没有性能，并且需要大量内存。这里有一些

这个ANWSER会考虑在DOM中尝试渲染100K可更新的项，并且不希望在每次更改时调用100K侦听器（<代码> Stury.Cube（）/代码>）。

---

2所学校 以功能性方式开发UI应用程序时，您基本上有两种选择：

始终从最顶端渲染 它工作得很好，但需要更多的样板文件。这并不完全是建议的Redux方法，但可以实现，有一些缺点。请注意，即使您成功地建立了一个redux连接，您仍然需要在许多地方调用大量的

shouldComponentUpdate

。如果有无限多个视图（如递归），则必须将所有中间视图也渲染为虚拟dom，并且对其中许多视图调用

shouldComponentUpdate

。因此，即使只有一个连接，这也不是真正更有效

如果您不打算使用反应生命周期方法，但只使用纯渲染函数，那么您应该考虑其他类似的选项，这些选项只会聚焦在该作业上，比如（可以与ReDux一起使用）< /P> 根据我自己的经验，在较旧的移动设备（比如我的Nexus4）上使用React是不够的，特别是当您将文本输入链接到atom状态时

将数据连接到子组件 这就是使用

connect

的建议。因此，当状态更改且仅与较深的子级相关时，您只渲染该子级，而不必每次都渲染顶级组件，如上下文提供程序（redux/intl/custom…）或主应用程序布局。您还可以避免在其他孩子上调用

shouldComponentUpdate

，因为它已经烘焙到侦听器中。调用很多非常快速的侦听器可能比渲染everytime intermediate react组件要快，而且它还允许减少通过样板文件的大量道具，因此对我来说，与react一起使用是有意义的

还请注意，身份比较非常快，每次更改都可以轻松地进行很多比较。记住Angular的肮脏检查：有些人确实用它构建了真正的应用程序！身份比较要快得多

---

理解你的问题 我不确定是否能完全理解您的所有问题，但我知道您的视图中有大约10万个项目，您想知道是否应该对所有这些10万个项目使用

connect

，因为在每次更改时调用10万个侦听器似乎代价高昂

这个问题似乎是使用UI进行函数式编程的本质所固有的：列表已更新，因此您必须重新呈现列表，但不幸的是，它是一个很长的列表，似乎没有效率。。。有了主干，你可以破解一些东西来只渲染孩子。即使使用React渲染该子级，也会以命令式方式触发渲染，而不是仅仅声明“当列表更改时，重新渲染它”

---

解决你的问题 显然是连接t

list.map(item => this.renderItem(item))

Item = connectItem(Item)

class MyItemComponent extends Component {
  state = {
    itemUpdated: undefined, // Will store the local
  };
  componentDidMount() {
    this.unsubscribe = this.props.store.addDispatchListener(action => {
      const isItemUpdate = action.type === "MY_ITEM_UPDATED" && action.payload.item.id === this.props.itemId;
      if (isItemUpdate) {
        this.setState({itemUpdated: action.payload.item})
      }
    })
  }
  componentWillUnmount() {
    this.unsubscribe();
  }
  render() {
    // Initially use the data provided by the parent, but once it's updated by some event, use the updated data
    const item = this.state.itemUpdated || this.props.item;
    return (
      <div>
        {...}
      </div>
    );
  }
}