我不确定const App = connect((state) => state)(RepoList)是从哪里来的

别这样！它会扼杀任何性能优化，因为TodoApp会在每次操作后重新启动.

我们不建议使用这种模式.相反，每一个都专门连接<Repo>，以便在其mapStateToProps中读取自己的数据."tree-view"的例子展示了如何做到这一点.

如果将状态形状设置为normalized以上(现在都是嵌套的)，则可以将repoIds与reposById分开，然后仅在repoIds发生变化时才重新渲染RepoList.这样，对单个回购协议的更改不会影响列表本身，只有相应的Repo将被重新呈现.This pull request可能会让你知道这是怎么回事."real-world"示例展示了如何编写处理规范化数据的减缩器.

请注意，为了真正从规范化树提供的性能中获益，您需要完全像this 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会带来性能损失:当外部props 发生变化时，内部props 必须重新计算.然而，使用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);

请注意，我在ConnectedRepo中将connect()改为使用initialOwnProps而不是ownProps的工厂.这让React Redux跳过所有props 重新判断.

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

在我的测试中，这种方法优于之前的两种方法:

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

最后，如果你需要显示如此大量的数据，它无论如何都无法显示在屏幕上.实际上，在不显示上千行的情况下，显示上千行的效果更好.

我找到了一个解决方案，用一个可观察的内部减速器替换每个标签.

如果它有副作用，它不是Redux减量剂.这可能有效，但我建议将这样的代码放在Redux之外，以避免混淆.Redux reducer必须是纯函数，它们不能调用onNext个主题.