我不确定const App = connect((state) => state)(RepoList)来自哪里。React Redux文档中
的相应示例有一个通知：

不要这样！它会终止任何性能优化，因为TodoApp会在每次操作后重新渲染。最好在视图层次结构中的几个组件上有更细的connect（），每个组件仅侦听状态的相关部分。

我们不建议使用此模式。而是，每个连接<Repo>专门用于使其在中读取自己的数据mapStateToProps。“ tree-view ”示例显示了如何执行此操作。

如果您的状态更形标准化（现在这一切都嵌套），你可以单独repoIds从reposById，然后只有你RepoList要是再渲染repoIds的变化。这样，对单个存储库的更改不会影响列表本身，只有对应的存储库Repo会被重新呈现。该拉取请求可能使您了解如何工作。“ 真实世界 ”示例显示了如何编写处理归一化数据的化简器。

请注意，为了真正受益于通过规范化树提供的性能，您需要像此pull request一样做，并将mapStateToProps()工厂传递给connect()：

const makeMapStateToProps = (initialState, initialOwnProps) => {
  const { id } = initialOwnProps
  const mapStateToProps = (state) => {
    const { todos } = state
    const todo = todos.byId[id]
    return {
      todo
    }
  }
  return mapStateToProps
}

export default connect(
  makeMapStateToProps
)(TodoItem)

这很重要的原因是因为我们知道ID永远不会改变。使用ownProps会带来性能损失：每当外部道具发生变化时，都必须重新计算内部道具。但是，使用initialOwnProps不会招致此损失，因为它只能使用一次。

您的示例的快速版本如下所示：

import React from 'react';
import ReactDOM from 'react-dom';
import {createStore} from 'redux';
import {Provider, connect} from 'react-redux';
import set from 'lodash/fp/set';
import pipe from 'lodash/fp/pipe';
import groupBy from 'lodash/fp/groupBy';
import mapValues from 'lodash/fp/mapValues';

const UPDATE_TAG = 'UPDATE_TAG';

const reposById = pipe(
  groupBy('id'),
  mapValues(repos => repos[0])
)(require('json!../repos.json'));

const repoIds = Object.keys(reposById);

const store = createStore((state = {repoIds, reposById}, action) => {
  switch (action.type) {
  case UPDATE_TAG:
    return set('reposById.1.tags[0]', {id: 213, text: 'Node.js'}, state);
  default:
    return state;
  }
});

const Repo  = ({repo}) => {
  const [authorName, repoName] = repo.full_name.split('/');
  return (
    <li className="repo-item">
      <div className="repo-full-name">
        <span className="repo-name">{repoName}</span>
        <span className="repo-author-name"> / {authorName}</span>
      </div>
      <ol className="repo-tags">
        {repo.tags.map((tag) => <li className="repo-tag-item" key={tag.id}>{tag.text}</li>)}
      </ol>
      <div className="repo-desc">{repo.description}</div>
    </li>
  );
}

const ConnectedRepo = connect(
  (initialState, initialOwnProps) => (state) => ({
    repo: state.reposById[initialOwnProps.repoId]
  })
)(Repo);

const RepoList = ({repoIds}) => {
  return <ol className="repos">{repoIds.map((id) => <ConnectedRepo repoId={id} key={id}/>)}</ol>;
};

const App = connect(
  (state) => ({repoIds: state.repoIds})
)(RepoList);

console.time('INITIAL');
ReactDOM.render(
  <Provider store={store}>
    <App/>
  </Provider>,
  document.getElementById('app')
);
console.timeEnd('INITIAL');

setTimeout(() => {
  console.time('DISPATCH');
  store.dispatch({
    type: UPDATE_TAG
  });
  console.timeEnd('DISPATCH');
}, 1000);

请注意，我改变了connect()在ConnectedRepo使用一个工厂initialOwnProps，而不是ownProps。这样，React Redux可以跳过所有道具的重新评估。

我还删除了不必要的shouldComponentUpdate()内容，<Repo>因为React Redux负责在中实现它connect()。

这种方法在我的测试中击败了之前的两种方法：

one-connect.js: 43.272ms
repo-connect.js before changes: 61.781ms
repo-connect.js after changes: 19.954ms

最后，如果您需要显示大量数据，则无论如何它都无法显示在屏幕上。在这种情况下，更好的解决方案是使用虚拟表，这样您就可以呈现数千行而没有实际显示它们的性能开销。

通过用可观察的内部reducer替换每个标签，我得到了一个解决方案。

如果有副作用，则不是Redux减少剂。可能可行，但我建议将这样的代码放在Redux外部，以免造成混淆。Redux减速器必须是纯函数，它们不能调用onNext主题。