在React Hooks中,可以使用React.memo和useCallback来避免列表的重新渲染。下面是一个示例代码:
import React, { useState, useMemo, useCallback } from 'react';
const List = React.memo(({ items }) => {
console.log('List rendering...');
return (
{items.map(item => (
- {item}
))}
);
});
const App = () => {
const [count, setCount] = useState(0);
const [listItems, setListItems] = useState([1, 2, 3, 4, 5]);
const handleClick = useCallback(() => {
setCount(count + 1);
}, [count]);
const memoizedListItems = useMemo(() => listItems, [listItems]);
return (
Count: {count}
);
};
export default App;
在上面的例子中,List组件使用React.memo来包裹,这样只有当items属性发生变化时才会重新渲染。在App组件中,我们使用useState来定义count和listItems的状态,并使用useCallback来缓存handleClick函数,这样只有当count发生变化时才会重新创建函数。同时,我们使用useMemo来缓存listItems,保证只有listItems发生变化时才会重新计算。
这样,当点击"Increment"按钮时,只会重新渲染Count: {count}部分,而列表部分不会重新渲染。