Question

在简单的待办事项列表应用程序中，我有FiltersContainer组件，它为Filters组件提供道具：

// FiltersContainer.js
import { connect } from 'react-redux';
import { setVisibilityFilter } from '../actions';
import Filters from '../components/Filters';

function mapStateToProps(state) {
  const { visibilityFilter } = state.todos;

  // `visibilityFilter` variable value is - 'SHOW_ALL'.
  return {
    filters: [{
      title: 'All',
      value: 'SHOW_ALL',
      active: visibilityFilter === 'SHOW_ALL',
    }, {
      title: 'Completed',
      value: 'SHOW_COMPLETED',
      active: visibilityFilter === 'SHOW_COMPLETED',
    }, {
      title: 'Active',
      value: 'SHOW_ACTIVE',
      active: visibilityFilter === 'SHOW_ACTIVE',
    }],
  };
}

function mapDispatchToProps(dispatch) {
  return {
    onFilterClick(value) {
      dispatch(setVisibilityFilter(value));
    },
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(Filters);

问题是，该组件会在每次状态更改时呈现。

例如，切换todo项会强制渲染<Filters />组件，尽管filters数组和{{1}没有改变。

<小时/> 如果使用字符串替换visibilityFilter函数中的filters数组，则每个状态更改都不会呈现此组件：

mapStateToProps

完整的应用程序代码位于 - https://github.com/1ven/react-redux-todos

我错过了什么吗？

Answer 1

EveryTime你从mapStateToProps返回一个新的对象，这就是老道具不等于新道具的原因。因此每次都会渲染组件

如果旧道具不等于新道具，则React渲染组件在你的情况下你做

 return {
    filters: [{
      title: 'All',
      value: 'SHOW_ALL',
      active: visibilityFilter === 'SHOW_ALL',
    }, {
      title: 'Completed',
      value: 'SHOW_COMPLETED',
      active: visibilityFilter === 'SHOW_COMPLETED',
    }, {
      title: 'Active',
      value: 'SHOW_ACTIVE',
      active: visibilityFilter === 'SHOW_ACTIVE',
    }],
  };

oldProps = object

newProps =另一个对象（虽然内容相同，但两者都是不同的对象）

oldprops == newprops // no rerender

当你这样做时

return {
    filters: '',
  };

oldprops =''; newprops ='' oldprops === newprops不渲染

Answer 2

问题出在shallowEqual util函数中，它使用react-redux库检查组件道具是否发生了变化。

这个函数不会进行deepEqual检查，只会进行shallow检查，这就是为什么包含数组属性的对象不等于同一个对象。

当先前的道具等于下一个道具时，组件正在更新

2 个答案: