聊聊怎么利用Memoization提高React性能( 三 ) _生活百科

handler 函数，这更改了传递给子组件的引用。因此，我们需要有一种方法来避免这种重复创建。如果未重新创建 handler 函数，则对 handler 函数的引用不会更改，因此子组件不会重新渲染。
为了避免每次渲染父组件时都重新创建函数，我们将使用一个名为 useCallback() 的 React Hook 。 Hooks 是在 React 16 中引入的。要了解有关 Hooks 的更多信息，你可以查看 React 的官方 hooks 文档，或者查看 `React Hooks: How to Get Started & Build Your Own" 。
useCallback() 钩子传入两个参数：回调函数和依赖项列表。
以下是 useCallback() 示例：
const handleClick = useCallback(() => { //Do something}, [x,y]);在这里，useCallback() 被添加到 handleClick() 函数中。第二个参数 [x, y] 可以是空数组、单个依赖项或依赖项列表。每当第二个参数中提到的任何依赖项发生更改时，才会重新创建 handleClick() 函数。
如果 useCallback() 中提到的依赖项没有更改，则返回作为第一个参数提及的回调函数的 Memoization 版本。我们将更改父组件，以便对传递给子组件的处理程序使用 useCallback() 钩子：
//Parent.jsexport default function Parent() { const [count, setCount] = useState(0); const handleClick = () => { setCount(count + 1); }; const handler = useCallback(() => { // 给 handler 函数使用 useCallback() console.log("handler"); }, []); console.log("Parent render"); return ( <div className="App"> <button onClick={handleClick}>Increment</button> <h2>{count}</h2> <Child name={"joe"} childFunc={handler} /> </div> );}子组件代码将保持原样。
此示例的完整代码这个 sandbox 中。
当我们在上述代码的父组件中增加 count 时，我们可以看到以下输出：
Parent renderChild renderParent renderParent renderParent render由于我们对父组件中的 handler 使用了 useCallback() 钩子，因此每次父组件重新渲染时，都不会重新创建 handler 函数，并且会将 handler 的 Memoization 版本传递到子组件。子组件将进行浅比较，并注意到 handler 函数的引用没有更改，因此它不会调用 render 方法。
值得注意的事Memoization 是一种很好的手段，可以避免在组件的 state 或 props 没有改变时对组件进行不必要的重新渲染，从而提高 React 应用的性能。你可能会考虑为所有组件添加 Memoization，但这并不一定是构建高性能 React 组件的方法。只有在组件出现以下情况时，才应使用 Memoization：