Question

我有一些通过道具从Redux中获得的值，并且我不想在此值更改时不再渲染该组件。

我找到了一些答案，说我可以使用Memo，但是我不知道这是否是我的最佳选择？

我的“代码”：

const MyComponent = () => {
    return ...;
}

const mapStateToProps = state => ({
  myVar: state.myVar
});

export default connect(mapStateToProps)(MyComponent);

myVar在这种情况下不应重新呈现组件。

Answer 1

React.memo可以完成此工作，您可以传递自定义的相等性检查功能以仅在返回假值时执行重新渲染。我从未遇到过要完全忽略Redux商店中的值更新的情况，也许不应该将其存储在那里吗？

备忘录API

例如：React.memo(Component, [areEqual(prevProps, nextProps)])

UseSelector API

另一种方法是将useSelector与自定义的相等性检查功能配合使用：

useSelector Redux API Reference

连接API

如果您仍然希望使用mapStateToProps，还可以将自定义的相等性检查功能作为connect函数的参数传递：

areStatePropsEqual Redux API Reference

编辑：useRef解决方案

通过使用useRef，您将存储一个可变变量，该变量将在组件的整个生命周期中保持不变。

基于您的示例：

const StoreMyVar = (WrappedComponent) => ({myVar, ...props}) => {
  const myRefVar = useRef(myVar)
  return <WrappedComponent myVar={myRefVar} {...props} />
}

const MyComponentWithImmutableVar = StoreMyVar(MyComponent)

Answer 2

最快的方法是React.memo，但是您可以仅将其与功能组件一起使用。请注意，它未经测试。

const MyComponent(props) {
  return ...;
}

const areEqual(prevProps, nextProps) {
  return prevProps.myVar === nextProps.myvar
}

const mapStateToProps = state => ({
   myVar: state.myVar
});

export default React.memo(MyComponent, areEqual);

避免使用React钩子进行重新渲染

2 个答案: