Question

我正在使用react-redux，并且已连接一个组件。我的组件有自己的道具（变体和函数），还使用mapStateToProps从商店映射了一些状态。

管理该组件何时应重新渲染对我们而言非常重要，为此，我们使用propsAreEqual作为React.memo的第二个参数。

...

const mapStateToProps = (state: RootState) => ({
  name: state.user.name,
});

const dispatchProps = {
  editProfile: userActions.editProfile,
};

interface IProps {
  isOnCompleteProfile: boolean;
  onClickMessage: () => void;
}
type Props = ReturnType<typeof mapStateToProps> & typeof dispatchProps & IProps;

const MyFunction: React.FunctionComponent<Props> = (props) => {

   ...

}

function propsAreEqual(prevProps: IProps, nextProps: IProps) {
  return prevProps.isOnCompleteProfile === nextProps.isOnCompleteProfile;
}

export default connect(mapStateToProps, dispatchProps)(React.memo(MyFunction, propsAreEqual));

我的问题是，在这种情况下state.user.name发生更改后，此组件是否会重新呈现？或者我也必须在prevProps.name === nextProps.name;中提及propsAreEqual

Answer 1

Connect本质上将您的组件包装在一个单独的组件（HOC）中，并根据mapStateToProps函数的道具来呈现您的记忆组件。

话虽如此，您记忆的组件将收到一个名为name的道具。因此，您必须在propsAreEqual函数中返回false才能更新组件。

Answer 2

即使更改state.user.name，该组件也不会重新呈现。

因为您要基于isOnCompleteProfile MyFunction记住函数props。当isOnCompleteProfile更改时，您的函数将重新呈现。

如何将React.memo与react-redux连接并设置propsAreEqual？

2 个答案: