如何使用React.memo与React-redux连接并设置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函数提供道具的情况下呈现您的内存化组件。

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

Answer 2

即使state.user.name发生更改，组件也不会重新渲染。

因为您正在基于您的isOnCompleteProfileprops来记忆函数MyFunction。当isOnCompleteProfile更改时，函数将重新呈现。