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

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项将强制呈现

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

  return {
    filters: '',
  };
}

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

我错过什么了吗？




Answer 1

问题出在shallowEqualutil函数中，该函数使用react redux库检查组件道具是否更改

此函数不进行deepEqual检查，只进行shallow检查，这就是包含数组属性的对象不等于同一对象的原因。

Answer 2

每次你从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=对象

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

oldprops==newprops//no rerender

当你这么做的时候

return {
    filters: '',
  };

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