React 中hooks之 React useCallback使用方法总结

1. useCallback 底子概念

useCallback 是 React 的一个 Hook，用于记忆函数界说，避免在每次渲染时创建新的函数实例。它在需要将回调函数通报给颠末优化的子组件时特别有效。
当state变化的时候引起组件重新渲染实行会导致某个方法被反复创建增加内存负担，这个时候可以使用useCallback将该函数进行缓存，只创建一次
1.1 基本语法

1. const memoizedCallback = useCallback(
2.   () => {
3.     doSomething(a, b);
4.   },
5.   [a, b], // 依赖项数组
6. );

复制代码

同样的当依赖项省略时组件重新渲染都会实行，当依赖项为空数组的时候只有组件初始化的时候会实行一次，数组里有依赖项的时候依赖项发生变化的时候都会缓存一次
1.2 与平凡函数的区别

1. function ParentComponent() {
2.   const [count, setCount] = useState(0);
4.   // ❌ 每次渲染都会创建新的函数实例
5.   const handleClick = () => {
6.     console.log('Clicked');
7.   };
9.   // ✅ 函数实例会被记忆，只在依赖项变化时更新
10.   const handleClickMemoized = useCallback(() => {
11.     console.log('Clicked');
12.   }, []); // 空依赖数组，函数永远不会改变
14.   return <ChildComponent onClick={handleClickMemoized} />;
15. }

复制代码

2. useCallback 配合 React.memo 使用

2.1 基本示例

1. // 子组件使用 React.memo 优化
2. const ChildComponent = React.memo(function ChildComponent({ onClick }) {
3.   console.log("ChildComponent rendered");
4.   return <button onClick={onClick}>Click me</button>;
5. });
7. // 父组件使用 useCallback
8. function ParentComponent() {
9.   const [count, setCount] = useState(0);
10.   const [text, setText] = useState("");
12.   // 使用 useCallback 记忆回调函数
13.   const handleClick = useCallback(() => {
14.     setCount(c => c + 1);
15.   }, []); // 空依赖数组，因为不依赖任何值
17.   return (
18.     <div>
19.       <input value={text} onChange={e => setText(e.target.value)} />
20.       <p>Count: {count}</p>
21.       <ChildComponent onClick={handleClick} />
22.     </div>
23.   );
24. }

复制代码

2.2 带有依赖项的示例

1. function SearchComponent({ onSearch }) {
2.   const [searchTerm, setSearchTerm] = useState("");
3.   const [searchHistory, setSearchHistory] = useState([]);
5.   // 使用 useCallback 记忆搜索函数
6.   const handleSearch = useCallback(() => {
7.     if (searchTerm.trim()) {
8.       onSearch(searchTerm);
9.       setSearchHistory(prev => [...prev, searchTerm]);
10.     }
11.   }, [searchTerm, onSearch]); // 依赖 searchTerm 和 onSearch
13.   return (
14.     <div>
15.       <input
16.         value={searchTerm}
17.         onChange={e => setSearchTerm(e.target.value)}
18.       />
19.       <SearchButton onClick={handleSearch} />
20.       <SearchHistory items={searchHistory} />
21.     </div>
22.   );
23. }
25. // 优化的子组件
26. const SearchButton = React.memo(function SearchButton({ onClick }) {
27.   console.log("SearchButton rendered");
28.   return <button onClick={onClick}>搜索</button>;
29. });
31. const SearchHistory = React.memo(function SearchHistory({ items }) {
32.   return (
33.     <ul>
34.       {items.map((item, index) => (
35.         <li key={index}>{item}</li>
36.       ))}
37.     </ul>
38.   );
39. });

复制代码

3. 实际应用场景

3.1 表单处理

1. function ComplexForm() {
2.   const [formData, setFormData] = useState({
3.     name: '',
4.     email: '',
5.     message: ''
6.   });
8.   // 记忆表单字段更新函数
9.   const handleFieldChange = useCallback((fieldName) => (event) => {
10.     setFormData(prev => ({
11.       ...prev,
12.       [fieldName]: event.target.value
13.     }));
14.   }, []); // 不需要依赖项，因为使用了函数式更新
16.   return (
17.     <form>
18.       <FormField
19.         label="Name"
20.         value={formData.name}
21.         onChange={handleFieldChange('name')}
22.       />
23.       <FormField
24.         label="Email"
25.         value={formData.email}
26.         onChange={handleFieldChange('email')}
27.       />
28.       <FormField
29.         label="Message"
30.         value={formData.message}
31.         onChange={handleFieldChange('message')}
32.       />
33.     </form>
34.   );
35. }
37. const FormField = React.memo(function FormField({ label, value, onChange }) {
38.   console.log(`${label} field rendered`);
39.   return (
40.     <div>
41.       <label>{label}</label>
42.       <input value={value} onChange={onChange} />
43.     </div>
44.   );
45. });

复制代码

3.2 列表渲染优化

1. function TodoList() {
2.   const [todos, setTodos] = useState([]);
4.   // 记忆添加任务函数
5.   const handleAdd = useCallback((text) => {
6.     setTodos(prev => [...prev, { id: Date.now(), text, completed: false }]);
7.   }, []);
9.   // 记忆切换完成状态函数
10.   const handleToggle = useCallback((id) => {
11.     setTodos(prev =>
12.       prev.map(todo =>
13.         todo.id === id ? { ...todo, completed: !todo.completed } : todo
14.       )
15.     );
16.   }, []);
18.   // 记忆删除函数
19.   const handleDelete = useCallback((id) => {
20.     setTodos(prev => prev.filter(todo => todo.id !== id));
21.   }, []);
23.   return (
24.     <div>
25.       <AddTodo onAdd={handleAdd} />
26.       {todos.map(todo => (
27.         <TodoItem
28.           key={todo.id}
29.           todo={todo}
30.           onToggle={handleToggle}
31.           onDelete={handleDelete}
32.         />
33.       ))}
34.     </div>
35.   );
36. }
38. const TodoItem = React.memo(function TodoItem({ todo, onToggle, onDelete }) {
39.   return (
40.     <div>
41.       <input
42.         type="checkbox"
43.         checked={todo.completed}
44.         onChange={() => onToggle(todo.id)}
45.       />
46.       <span style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}>
47.         {todo.text}
48.       </span>
49.       <button onClick={() => onDelete(todo.id)}>删除</button>
50.     </div>
51.   );
52. });

复制代码

4. 性能优化最佳实践

4.1 合理使用依赖项

1. function UserProfile({ userId, onUpdate }) {
2.   // ✅ 只在 userId 或 onUpdate 变化时更新
3.   const handleUpdate = useCallback(() => {
4.     onUpdate(userId);
5.   }, [userId, onUpdate]);
7.   // ❌ 不必要的依赖项
8.   const handleClick = useCallback(() => {
9.     console.log('Clicked');
10.   }, [userId]); // userId 不需要作为依赖项
11. }

复制代码

4.2 避免过分优化

1. // ❌ 简单组件不需要使用 useCallback
2. function SimpleButton({ onClick }) {
3.   return <button onClick={onClick}>Click me</button>;
4. }
6. // ✅ 复杂组件或频繁重渲染的组件使用 useCallback
7. const ComplexComponent = React.memo(function ComplexComponent({ onAction }) {
8.   // 复杂的渲染逻辑
9.   return (
10.     // ...
11.   );
12. });

复制代码

5. useCallback 与其他 Hooks 配合

5.1 配合 useEffect 使用

1. function DataFetcher({ query }) {
2.   const [data, setData] = useState(null);
4.   // 记忆获取数据的函数
5.   const fetchData = useCallback(async () => {
6.     const response = await fetch(`/api/search?q=${query}`);
7.     const result = await response.json();
8.     setData(result);
9.   }, [query]);
11.   // 在 effect 中使用记忆的函数
12.   useEffect(() => {
13.     fetchData();
14.   }, [fetchData]); // fetchData 作为依赖项
16.   return <div>{/* 渲染数据 */}</div>;
17. }

复制代码

5.2 配合 useMemo 使用

1. function DataProcessor({ data, onProcess }) {
2.   // 记忆处理函数
3.   const processData = useCallback((item) => {
4.     // 复杂的数据处理逻辑
5.     return someExpensiveOperation(item);
6.   }, []);
8.   // 使用记忆的函数处理数据
9.   const processedData = useMemo(() => {
10.     return data.map(processData);
11.   }, [data, processData]);
13.   return (
14.     <div>
15.       {processedData.map(item => (
16.         <ProcessedItem
17.           key={item.id}
18.           item={item}
19.           onProcess={onProcess}
20.         />
21.       ))}
22.     </div>
23.   );
24. }

复制代码

6. 注意事项

• 避免过分使用
  
  
  
  • 只在性能确实受影响时使用
    
  • 简朴组件和回调不需要使用 useCallback
    
  
  
• 精确设置依赖项
  
  
  
  • 包含所有回调中使用的变量
    
  • 避免不须要的依赖项
    
  
  
• 配合 React.memo 使用
  
  
  
  • 单独使用 useCallback 可能无法带来性能提拔
    
  • 需要配合 React.memo 等优化本领
    
  
  
• 思量使用场景
  
  
  
  • 频仍重渲染的组件
    
  • 复杂的盘算或操作
    
  • 通报给多个子组件的回调
    
  
  

通过合理使用 useCallback 和 React.memo，我们可以有效优化 React 应用的性能。但要记着，过分优化可能会适得其反，应该在实际需要时才进行优化。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。