避免使用反应钩子重新渲染

Question

我有一些通过 props 来自 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)])

使用选择器API

另一种方法是使用useSelector自定义相等性检查函数：

useSelector Redux API 参考

连接API

如果您仍然想坚持使用 mapStateToProps，您还可以传递自定义相等性检查函数作为 connect 函数的参数：

areStatePropsEqual Redux API 参考

编辑：useRef 解决方案

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

基于您的示例：

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

const MyComponentWithImmutableVar = StoreMyVar(MyComponent)