示例代码:https://github.com/d6u/example-redux-update-nested-props/blob/master/one-connect/index.js

观看现场演示:http://d6u.github.io/example-redux-update-nested-props/one-connect.html

如何优化嵌套组件的道具的小更新？

我有上面的组件,Repo和RepoList.我想更新第一个仓库的标签(第14行).所以我发出了一个UPDATE_TAG动作.在我实施之前shouldComponentUpdate,调度大约需要200毫秒,这是预料之中的,因为我们浪费了很多时间<Repo/>来分析没有改变的东西.

添加后shouldComponentUpdate,调度大约需要30ms.在生产构建React.js之后,更新仅花费大约17ms.这要好得多,但Chrome开发者控制台中的时间线视图仍然表示jank帧(超过16.6ms).

想象一下,如果我们有这样的许多更新,或者<Repo/>比当前更新更复杂,我们将无法维持60fps.

我的问题是,对于嵌套组件的道具的这种小更新,是否有更高效和规范的方式来更新内容？我还可以使用Redux吗？

我通过用tags可观察的内部减速器替换每一个来获得解决方案.就像是

// inside reducer when handling UPDATE_TAG action
// repos[0].tags of state is already replaced with a Rx.BehaviorSubject
get('repos[0].tags', state).onNext([{
  id: 213,
  text: 'Node.js'
}]);

然后我使用https://github.com/jayphelps/react-observable-subscribe在Repo组件中订阅它们的值.这很有效.即使使用React.js的开发构建,每个调度仅花费5ms.但我觉得这是Redux中的反模式.

更新1

我按照Dan Abramov的回答中的建议,将我的状态和更新的连接组件规范化

新的状态形状是:

{
    repoIds: ['1', '2', '3', ...],
    reposById: {
        '1': {...},
        '2': {...}
    }
}

我加了console.time各地 …

我一直试图给出<TextInput>一个letterSpacing风格,但它似乎只适用于<Text>.React Native中有没有办法增加TextInput中字符之间的空间？

这增加了角色之间的空间

<Text style={{'letterSpacing': 5}}>Some Text</Text>

这不行

<TextInput style={{'letterSpacing': 5}} />