Javascript 如何优化子组件中的前置类型和引用类型？

我对备忘录和回拨挂钩有疑问

---

如果函数和数据属性都从父组件传递到子组件。如何使用纯组件优化该类型。

从您的问题中，我认为您对何时使用备忘录和回调挂钩感到困惑

因此，如果您有一些回调函数和一些从父组件传递到子组件的数据，您可以这样做

如果不在useCallback hook中包装回调函数，则每当重新呈现父组件时，此父组件中存在的回调函数也会重新创建并传递给子组件，从而导致子组件再次重新呈现。这是不必要的重新渲染，可以通过-

对于回调函数，将函数包装在useCallback钩子中

const myFunction = useCallback(() => {
  //function code
},[]) // add whatever dependencies this function has in dependency array

因此，当您的依赖项仅发生更改时，将创建新的

myFunction

副本， 否则，无论父组件重新渲染多少次，相同的函数引用都将传递给子组件

现在，这同样适用于数据。若您在父组件中计算了一些数据，这些数据在下面传递给子组件，那个么您可以将其包装在UseMoom中

如果不将其包装在useMemo中，则每次父级重新渲染时都会重新计算该值，从而导致性能问题

const myData = useMemo(() => {
  // compute youre data here
  return data
},[]) // add dependencies for which you have to recompute your data

现在，仅当任何依赖项数组发生更改时，才会重新计算数据

因此，在useCallback中包装useMemo&calback函数中的数据可以确保仅当与数据相关的某些依赖项发生更改时才创建新副本。否则，副本将被持久化

这样可以避免对子组件进行不必要的重新渲染

最后，如果您将子组件作为功能组件，您可以将其包装在

React.memo

中进行优化

---

您也可以阅读本博客，了解更多关于示例的内容。

您可以添加一些代码吗？