React+Redux中ComponentWillReceiveProps被调用两次的问题求助

我之前也碰到过一模一样的情况，这种重复调用大概率是react-redux的connect高阶组件和react-router的路由props更新逻辑共同导致的——有时候即使match.url看起来没变，但match对象内部的一些属性（比如params的引用）发生了浅变化，或者connect的默认浅比较触发了不必要的组件更新，就会让这个生命周期钩子被调用两次。

给你几个实用的解决办法：

1. 替换为更安全的现代生命周期钩子 #

componentWillReceiveProps已经被React标记为不安全的API了，推荐换成componentDidUpdate来处理props变化后的逻辑，它只会在组件完成更新后触发一次，而且默认会基于浅比较判断是否需要执行：

componentDidUpdate(prevProps) {
  if (this.props.match.url !== prevProps.match.url) {
    console.log('its different');
  } else {
    console.log('its same url');
  }
}

2. 优化connect的比较逻辑 #

react-redux的connect方法允许自定义props比较函数，你可以通过配置areMergedPropsEqual来忽略那些不影响业务的props变化，只关注match.url和你真正需要的属性：

import { connect } from 'react-redux';

const mapStateToProps = state => ({
  // 你的state映射逻辑
});

// 自定义合并后的props比较函数
const shouldUpdateProps = (prevProps, nextProps) => {
  // 只比较我们关心的match.url，其他无关变化直接忽略
  return prevProps.match.url === nextProps.match.url;
};

export default connect(
  mapStateToProps,
  null,
  null,
  { areMergedPropsEqual: shouldUpdateProps }
)(YourComponent);

3. 用React.memo包裹组件做浅比较 #

如果你的组件是函数式组件，或者可以改成函数式的，用React.memo包裹后自定义比较逻辑，能直接避免不必要的重新渲染：

import React from 'react';

const YourComponent = React.memo((props) => {
  // 组件的JSX内容
}, (prevProps, nextProps) => {
  // 只有当match.url变化时才重新渲染
  return prevProps.match.url === nextProps.match.url;
});

优先尝试第一种方法替换生命周期钩子，这是React官方推荐的方向；如果还是有问题，再结合后两种方法优化props的比较逻辑，就能解决重复调用的问题了。

内容的提问来源于stack exchange，提问作者elaineee