Reactjs 避免使用react钩子重新渲染

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

我发现一些答案说我可以使用备忘录，但我不知道这是否是我的情况下的最佳选择

我的“代码”：

---

myVar

在这种情况下，更改不应重新呈现组件。

React.memo可以执行此任务，您可以通过自定义相等性检查函数，仅当它返回falsy值时才执行重新渲染。我从来没有遇到过这样的情况：你想完全忽略Redux存储中的值更新，也许它不应该存储在那里

备忘录API

例如：

React.memo（组件，[areEqual（prevProps，nextProps）]）

使用选择器API

另一种方法是将

useSelector

与自定义相等性检查功能一起使用：

连接API

如果仍要使用MapStateTops，还可以将自定义相等性检查函数作为connect函数的参数传递：

编辑：useRef解决方案

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

基于您的示例：

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

const MyComponentWithImmutableVar = StoreMyVar(MyComponent)

conststoremyvar=（WrappedComponent）=>（{myVar，…props}）=>{
常量myRefVar=useRef（myVar）
返回
}
常量MyComponentWithImmutableVar=StoreMyVar（MyComponent）

React.memo可以执行此任务，您可以通过自定义相等性检查函数，仅当它返回falsy值时才执行重新渲染。我从来没有遇到过这样的情况：你想完全忽略Redux存储中的值更新，也许它不应该存储在那里

备忘录API

例如：

React.memo（组件，[areEqual（prevProps，nextProps）]）

使用选择器API

另一种方法是将

useSelector

与自定义相等性检查功能一起使用：

连接API

如果仍要使用MapStateTops，还可以将自定义相等性检查函数作为connect函数的参数传递：

编辑：useRef解决方案

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

基于您的示例：

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

const MyComponentWithImmutableVar = StoreMyVar(MyComponent)

conststoremyvar=（WrappedComponent）=>（{myVar，…props}）=>{
常量myRefVar=useRef（myVar）
返回
}
常量MyComponentWithImmutableVar=StoreMyVar（MyComponent）

最快的方法是，但您可以将其仅用于功能组件。小心，它没有经过测试

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);

最快的方法是，但您可以将其仅用于功能组件。小心，它没有经过测试

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);

---

请分享你的代码。如果我们不知道你是什么，我们就不能给你任何答案doing@Vencovsky已添加代码请共享您的代码。如果我们不知道你是什么，我们就不能给你任何答案doing@Vencovsky添加了代码它是一个刷卡组件，商店保存了刷卡的组件，但是如果我使用刷卡的组件作为参考重新渲染，它会出现小故障，但是，组件中的其他状态更改不会破坏它，我会尝试memo，看看它是否有效，谢谢！我似乎无法让它发挥作用，因为你可以将之前的道具与下一个道具进行比较，但我不想将它们进行比较，我只想忽略单个道具的更改，但确认其他道具。我认为在您的情况下，我会删除prevProps和nextProps对象中我想忽略的道具，然后返回两个结果对象的粗略比较。（恢复默认行为）我在帖子中使用useRef钩子添加了另一个解决方案！这是一个刷卡组件，商店会保存刷卡的组件，但是如果我使用刷卡的组件作为参考重新渲染，它会出现小故障，但是，组件中的其他状态更改不会破坏它，我会尝试使用memo，看看它是否有效，谢谢！我似乎无法让它发挥作用，因为你可以将之前的道具与下一个道具进行比较，但我不想将它们进行比较，我只想忽略单个道具的更改，但确认其他道具。我认为在您的情况下，我会删除prevProps和nextProps对象中我想忽略的道具，然后返回两个结果对象的粗略比较。（恢复默认行为）我在帖子中使用useRef钩子添加了另一个解决方案！