尽管Redux依赖关系未更改，但React useEffect在后续渲染后运行

Question

我有一个带有昂贵副作用的React-function-component：

  useEffect(() => {
    doExpensiveSideEffect(reduxProp);
  }, [reduxProp]);

reduxProp是通过Redux连接器从外部提供服务的属性。对于这个问题，我希望reduxProp的确切来源无关紧要。

我的问题是doExpensiveSideEffect的运行次数超出了必要。

• 它会在第一个渲染之后运行，这很好。
• 只要重新分配reduxProp，它就会运行，这也很好。
• 但是，即使reduxProp不变，它也将在后续渲染之后运行！

这导致了我的问题： 如何且仅在重新分配doExpensiveSideEffect的情况下才能确保reduxProp运行，而不管后续渲染的数量如何？

编辑：

值得注意的是，该组件被包装到Router-Higher-Order-Component中。路由由IonReactRouter-Component控制。我想IonReactRouter会生成同一子组件的多个实例，这可能是此问题的根本原因。

有关IonReactRouter的更多信息，请参见https://ionicframework.com/docs/react/navigation。

此外，reduxProp通过connect的{​​{1}}函数传递。 在两者之间，使用自定义“选择器”从全局AppState中选择react-redux。 以下代码演示了从全局AppState到上述useEffect的路径：

reduxProp

现在const OuterComponent = withRouter( connect<StateProps, DispatchProps, OwnProps, AppState>( (state: AppState, ownProps: OwnProps) => ({ reduxProp: selectPartOfState(state, ownProps), }), {} )(InnerComponent) ); 的道具中收到InnerComponent并包含上述useEffect。