ReactJS重新选择容器重新渲染

时间:2018-06-01 07:09:25

标签: javascript reactjs reselect

我是新手反应重新选择,问题是当我Perf.printWasted时,它总是显示“内容单一>连接(单项目索引)”只有1个实例而不是渲染xx次

这是我当前的代码

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { createSelector } from 'reselect';
import { shape } from 'prop-types';

import Entry from '/components/entries/Entry';

class Entries extends Component {
  static displayName = 'Single Entries Index';

  static propTypes = { entries: shape() };

  shouldComponentUpdate(nextProps) {
    if (this.props.entries.size !== nextProps.entries.size) {
      return true;
    }
    return false;
  }

  render() {
    const { entries } = this.props;
    return (
      <ul className="entries">
        {entries.map(entry => (
          <Entry
            key={entry.get('id')}
            id={entry.get('id')}
          />
        ))}
      </ul>
    );
  }
};

const makeGetEntries = createSelector(
  state => state.data,
  data => data.get('entries')
);

const mapStateToProps = (state) => {
  return {
    entries: makeGetEntries(state)
  };
};

export default connect(mapStateToProps)(Entries);

按照@Logar

的建议使用createSelectorCreator工作解决方案
const createDeepEqualSelector = createSelectorCreator(
  defaultMemoize,
  isEqual
);

const makeGetEntries = createDeepEqualSelector(
  state => state.data,
  data => data.get('entries')
);

const mapStateToProps = (state) => {
  return { entries: makeGetEntries(state) };
};

export default connect(mapStateToProps)(Entries);

0 个答案:

没有答案