1
import React, { useState, useCallback } from 'react';
2

3
function Button({ onClick, children }) {
4
  console.log('Button rendered');
5
  return <button onClick={onClick}>{children}</button>;
6
}
7

8
function App() {
9
  const [count, setCount] = useState(0);
10

11
  // 缓存handleClick函数，只有当count变化时才会重新创建
12
  const handleClick = useCallback(() => {
13
    console.log('Clicked with count:', count);
14
  }, [count]);
15

16
  return (
17
    <div>
18
      <p>Count: {count}</p>
19
      <button onClick={() => setCount(count + 1)}>
20
        Increment
21
      </button>
22
      <Button onClick={handleClick}>
23
        Click me
24
      </Button>
25
    </div>
26
  );
27
}

1
import React, { useState, useMemo } from 'react';
2

3
function App() {
4
  const [count, setCount] = useState(0);
5
  const [name, setName] = useState('');
6

7
  // 缓存计算结果，只有当count变化时才会重新计算
8
  const expensiveValue = useMemo(() => {
9
    console.log('Calculating expensive value...');
10
    let result = 0;
11
    for (let i = 0; i < 1000000000; i++) {
12
      result += i;
13
    }
14
    return result;
15
  }, [count]);
16

17
  return (
18
    <div>
19
      <p>Count: {count}</p>
20
      <p>Expensive value: {expensiveValue}</p>
21
      <button onClick={() => setCount(count + 1)}>
22
        Increment
23
      </button>
24
      <input
25
        type="text"
26
        value={name}
27
        onChange={(e) => setName(e.target.value)}
28
        placeholder="Enter your name"
29
      />
30
    </div>
31
  );
32
}

1
import React, { useState, Suspense, lazy } from 'react';
2

3
// 懒加载组件
4
const LazyComponent = lazy(() => import('./LazyComponent'));
5

6
function App() {
7
  const [showLazy, setShowLazy] = useState(false);
8

9
  return (
10
    <div>
11
      <h1>Code Splitting Example</h1>
12
      <button onClick={() => setShowLazy(true)}>
13
        Show Lazy Component
14
      </button>
15
      {showLazy && (
16
        <Suspense fallback={<div>Loading...</div>}>
17
          <LazyComponent />
18
        </Suspense>
19
      )}
20
    </div>
21
  );
22
}

1
import React, { Suspense, lazy } from 'react';
2
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
3

4
// 懒加载路由组件
5
const Home = lazy(() => import('./Home'));
6
const About = lazy(() => import('./About'));
7
const Contact = lazy(() => import('./Contact'));
8

9
function App() {
10
  return (
11
    <Router>
12
      <div>
13
        <nav>
14
          <ul>
15
            <li>
16
              <Link to="/">Home</Link>
17
            </li>
18
            <li>
19
              <Link to="/about">About</Link>
20
            </li>
21
            <li>
22
              <Link to="/contact">Contact</Link>
23
            </li>
24
          </ul>
25
        </nav>
26

27
        <Suspense fallback={<div>Loading...</div>}>
28
          <Routes>
29
            <Route path="/" element={<Home />} />
30
            <Route path="/about" element={<About />} />
31
            <Route path="/contact" element={<Contact />} />
32
          </Routes>
33
        </Suspense>
34
      </div>
35
    </Router>
36
  );
37
}

1
import React, { createContext, useState, useContext } from 'react';
2

3
// 创建多个Context
4
const ThemeContext = createContext();
5
const UserContext = createContext();
6

7
// 创建Provider组件
8
export function ThemeProvider({ children }) {
9
  const [theme, setTheme] = useState('light');
10

11
  return (
12
    <ThemeContext.Provider value={{ theme, setTheme }}>
13
      {children}
14
    </ThemeContext.Provider>
15
  );
16
}
17

18
export function UserProvider({ children }) {
19
  const [user, setUser] = useState(null);
20

21
  return (
22
    <UserContext.Provider value={{ user, setUser }}>
23
      {children}
24
    </UserContext.Provider>
25
  );
26
}
27

28
// 创建自定义Hook
29
export function useTheme() {
30
  return useContext(ThemeContext);
31
}
32

33
export function useUser() {
34
  return useContext(UserContext);
35
}

1
import React, { createContext, useReducer, useContext, useCallback } from 'react';
2

3
// 创建Context
4
const CounterContext = createContext();
5

6
// 定义reducer
7
function counterReducer(state, action) {
8
  switch (action.type) {
9
    case 'increment':
10
      return { count: state.count + 1 };
11
    case 'decrement':
12
      return { count: state.count - 1 };
13
    default:
14
      throw new Error();
15
  }
16
}
17

18
// 创建Provider组件
19
export function CounterProvider({ children }) {
20
  const [state, dispatch] = useReducer(counterReducer, { count: 0 });
21

22
  // 缓存dispatch函数
23
  const increment = useCallback(() => dispatch({ type: 'increment' }), []);
24
  const decrement = useCallback(() => dispatch({ type: 'decrement' }), []);
25

26
  return (
27
    <CounterContext.Provider value={{ count: state.count, increment, decrement }}>
28
      {children}
29
    </CounterContext.Provider>
30
  );
31
}
32

33
// 创建自定义Hook
34
export function useCounter() {
35
  const context = useContext(CounterContext);
36
  if (!context) {
37
    throw new Error('useCounter must be used within a CounterProvider');
38
  }
39
  return context;
40
}