React JS 组件在传递 props 时重新渲染，尽管有回调

Question

在我的react项目中，我设置了回调来阻止过多的重新渲染，因为那里显示的数据相当大，并且有很多不同的按钮可供用户点击，所有这些都会导致重新渲染。

useCallback 挂钩起作用，并且不会调用重新呈现，除非我也将道具与 useCallback 函数一起传递，在这种情况下，每次用户与应用程序交互时都会重新呈现子组件。

例如，如果我像这样创建一个子组件：

<Dropdown
//props={{ cat, var }}
getLi={getLi}
getType={getType}
increment={increment}
/>

在下拉子项中，我将 cat 和 var 定义为 const cat = "" 和 const var = "10"

当我单击子组件内的下拉菜单按钮时，组件不会重新呈现。

但是，如果我这样创建子组件 -

<Dropdown
props={{ cat, var }}
getLi={getLi}
getType={getType}
increment={increment}
/>

然后定义cat和var为const {cat, var} = props

回调函数不起作用，子组件不断重新渲染。

我尝试将 props 中的两个变量都添加到回调函数中的依赖项列表中，这也没有任何作用。

Answer 1

props={{ cat, var }}

每次运行时，它都会创建一个新对象。该对象可能具有相同的键和值，但它是一个新对象。如果你在 Dropdown 上使用 React.memo，那么它将在旧对象和新对象之间做一个 ===，看到它们不同，然后重新渲染。

如果你想跳过渲染，你需要确保你所有的道具都通过了 === 检查。所以你可以记住这个对象：

const example = useMemo(() => {
  return { cat, var }
}, [cat, var])

// ...
<Dropdown
  props={example}

或者把它拆分成单独的道具，这样每个道具都有自己的===检查。

<Dropdown
  cat={cat}
  var={var}
  getLi={getLi}
  // ...

React JS components rerendering despite callbacks when props are passed