如何使用 React.memo 和 react-redux connect 并设置 propsAreEqual？

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 更改后，此组件会重新呈现吗？或者我也必须在 propsAreEqual 中提到 prevProps.name === nextProps.name;

Answer 1

Connect 本质上将您的组件包装在一个单独的组件 (HOC) 中，并在给定 mapStateToProps 函数的 props 的情况下呈现您的记忆组件。

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

Answer 2

即使在 state.user.name 更改后，该组件也不会 re-render。

因为您正在根据 isOnCompleteProfile props 记忆函数 MyFunction。当 isOnCompleteProfile 更改时，您的函数 re-renders.

如何使用 React.memo 和 react-redux connect 并设置 propsAreEqual？

How to use React.memo with react-redux connect and set propsAreEqual?

reactjs

redux

react-redux

memo