【发布时间】：2021-08-18 12:09:53
【问题描述】：
我对备忘录和回调挂钩有疑问。
如果函数和数据属性都从父组件传递到子组件。如何使用纯组件优化该类型。
【问题讨论】：
-
你能添加一些代码吗？
标签： javascript reactjs components react-props
【发布时间】：2021-08-18 12:09:53
【问题描述】：
根据您的问题，我认为您对何时使用备忘录和回调挂钩感到困惑。
所以如果你有一些回调函数和一些从父组件传递给子组件的数据你可以这样做，
如果您不将回调函数包装在 useCallback 挂钩中，则每当您的父组件重新渲染时，该父组件中的回调函数也会重新创建并传递给子组件，这会导致您的子组件重新-再次渲染。这是不必要的重新渲染，可以通过 -
来避免对于回调函数，将你的函数包装在 useCallback 钩子中
const myFunction = useCallback(() => {
//function code
},[]) // add whatever dependencies this function has in dependency array
所以现在，只要您的依赖项发生变化，就会创建一个新的 myFunction 副本，
否则，无论父组件重新渲染多少次，都会将相同的函数引用传递给子组件。
现在这同样适用于数据。如果您在父组件中计算了一些数据并在下面传递给子组件，则可以将其包装在 useMemo 中
如果您不将其包装在 useMemo 中，则每次父级重新渲染时都会重新计算它，从而导致性能问题。
const myData = useMemo(() => {
// compute youre data here
return data
},[]) // add dependencies for which you have to recompute your data
现在只有在任何依赖数组发生变化时才会重新计算数据。
因此，将数据包装在 useMemo 和 useCallback 中的回调函数可确保仅当与其相关的某些依赖项发生更改时才创建新副本。否则副本被持久化
这样可以避免不必要地重新渲染您的子组件。
最后如果你有子组件作为功能组件，你可以把它包裹在React.memo中进行优化。
您还可以阅读此博客以通过示例更多地了解此挂钩。
【讨论】：