Redux不应该阻止重新渲染吗？

Question

我有一个List显示多个Item组件的组件。List从Redux存储获取数据。

当商店更新时（例如，因为我删除了一个项目），所有Item都重新呈现。 这是为什么？

我知道我可以shouldComponentUpdate()用来阻止新的渲染，但是我认为Redux会在内部进行。

List.js

import React, { PropTypes, Component } from 'react';
import { connect } from 'react-redux';

import Item from './Item';

class List extends Component {
  render() {
    const { items } = this.props;

    return (
      <div>
        <h2>List</h2>
        {items.map((item, index) => <Item key={index} name={item.name} />)}
      </div>
    );
  }
}

const mapStateToProps = state => ({
  items: state.items
});

export default connect(
  mapStateToProps
)(List);

Item.js

import React, { PropTypes, Component } from 'react';

class Item extends Component {
  render() {
    console.log('Render', this.props.name); // The component is re-rendered even if the props didn't change
    return (
      <div>
        {this.props.name}
      </div>
    );
  }
}

Item.propTypes = {
  name: PropTypes.string
};

export default Item;

Answer 1

一些现有技术（如Dan Abramov所说）：Redux是一种状态管理工具。它提供了一个HOC（connect），但该HOC 不负责组件管理
。Redux无论如何都不会管理组件的生命周期：它提供了一种有效存储和查询应用程序所需数据的方法。它在很大程度上受Om（通往React的Clojurescript桥）的影响。实际上，storeredux中的s非常类似于atomClojure中的数据类型。

现在，深入探讨问题的根源-即使您的数据 完全相同
，并且即使您确实使用过shouldComponentUpdate，您的组件仍将重新呈现。原因是Array.prototype.map 总是
在堆上产生一个新对象。结果，它们在 引用上 不 相等 。一些代码来演示这个概念：

const myArr = [1, 2, 3]
const myArrCopy = myArr.map((n) => n);
myArr === myArrCopy // false

但是，如果使用shallowEqual，则会得到不同的结果：

const myArr = [1, 2, 3]
const myArrCopy = myArr.map((n) => n);
React.addons.shallowCompare(myArr, myArrCopy); // true

这是为什么？那是因为shallowCompare检查 值相等性
，比较数组中的每个值。但是，shallowEquals对于未开始的人可能存在以下陷阱：

const myObject = { foo: 'bar' };
const myObject2 = { foo: 'baar' };
React.addons.shallowCompare(myObject, myObject2); // true

我们的两个对象并不相同，但是会shallowCompare返回，true因为它仅比较其参数的 键
。如果这对您足够好，则可以简单地扩展React.PureComponent，shouldComponentUpdate为您实现，并用于shallowCompare计算props和的相等性state。

输入Immutable.js。这样就shallowCompare完全不需要了。考虑以下：

const myList = Immutable.List([1, 2, 3]);
const myListCopy = myList.map((n) => n);
myList.equals(myListCopy) // true

在内部，不可变共享数据，并且可以非常有效地比较数据结构以实现深度相等。话虽这么说，不可变伴随着权衡取舍：数据结构变得更加不透明，调试起来可能更加困难。总而言之，我希望这能回答您的问题。JSBin在这里：https
://jsbin.com/suhujalovi/edit
?
html,js,console