如何避免由于mapDispatchToProps函数而重新渲染连接的React PureComponent？

Question

每当调用mapDispatchToProps时，它都会生成新函数以返回。例如：

const mapDispatchToProps = function(dispatch, ownProps) {
  return {
    addToStack: (episodeId, stackId) => {
      return dispatch(StackAction.addEpisodeToStack(episodeId, stackId));
    },
  };
}

每次调用mapDispatchToProps时，它将生成一个带有新箭头功能的新对象。

在我的应用程序中，我常常不得不避免重新渲染组件。使用PureComponent通常是可行的方法。但是，由于功能总是不同的，因此PureComponent将无济于事，我必须创建一个shouldComponentUpdate策略。在这里，我必须将所有mapDispatchToProps函数“列入黑名单”，并忽略所有这些函数。我必须将每个新功能添加到列表中，以免重新渲染。

这是黑名单shouldComponentUpdate样板的示例：

const blacklist = [
  'addToStack',
]

shouldComponentUpdate(nextProps, nextState) {
  for (let i in nextProps) {
    if (blacklist.includes(i)) continue;
    if (nextProps[i] !== this.props[i]) {
      return true;
    }
  }
  for (let i in nextState) {
    if (nextState[i] !== this.state[i]) {
      return true;
    }
  }
  return false;
}

我想出了一个新的解决方案

const dispatch;
const mapDispatchToPropsFunctions = {
  addToStack: (episodeId, stackId) => {
    return dispatch(StackAction.addEpisodeToStack(episodeId, stackId));
  },
};

const mapDispatchToProps = function(dispatchArg, ownProps) {
  dispatch = dispatchArg
  return mapDispatchToPropsFunctions;
}

这样，函数是恒定的，不会触发PureComponent的重新渲染，并且我不必维护shouldComponentUpdate函数。

但是，这对我来说似乎是错误的。是否有“默认”方式处理此问题？

Answer 1

我通常建议不要尝试重新创建捕获此类 props 值的函数，而是在类上有一个处理程序方法，将 props 值传递给操作创建者。我还建议人们不要mapDispatch直接编写函数，而是使用“对象简写” connect()。

例子：

const actions = {addToStack : StackAction.addEpisodeToStack};

class MyComponent extends React.Component {
    addToStack = () => {
        this.props.addToStack(this.props.episodeId, this.props.stackId);
    }
}

在您的特定代码片段中，看起来您甚至没有引用任何 props 值mapDispatch，因此无需声明ownProps参数。（如果请求参数，connect则只会mapDispatch多次调用函数ownProps。否则，它只会mapDispatch在创建组件时调用一次。）