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桥梁。事实上，redux中的store非常类似于Clojure中的atom数据类型。

现在，深入了解您的问题 - 即使您的数据完全相同，即使您确实使用了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

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

Answer 2

{items.map((item, index) => <Item key={index} name={item.name} />)}

此行始终在父组件中创建一个新数组，每次都生成“新”项组件

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

2 个答案: