速通React之Hooks的实现

const [state, setState] = useState(initialState);

import { useState } from 'react';

function UserForm() {
  const [username, setUsername] = useState('');
  const [age, setAge] = useState(18);

  const handleSubmit = () => {
    alert(`用户名：${username}，年龄：${age}`);
  };

  return (
    <div>
      <input 
        value={username} 
        onChange={(e) => setUsername(e.target.value)} 
        placeholder="请输入用户名" 
      />
      <input 
        type="number" 
        value={age} 
        onChange={(e) => setAge(Number(e.target.value))} 
      />
      <button onClick={handleSubmit}>提交</button>
    </div>
  );
}

const [state, dispatch] = useReducer(reducer, initialArg, init);

import { useReducer } from 'react';

// 1. 定义 reducer
function cartReducer(state, action) {
  switch (action.type) {
    case 'ADD':
      return { ...state, count: state.count + 1 };
    case 'SUBTRACT':
      return { ...state, count: Math.max(0, state.count - 1) };
    case 'RESET':
      return { ...state, count: 0 };
    default:
      return state;
  }
}

function ShoppingCart() {
  const [state, dispatch] = useReducer(cartReducer, { count: 0 });

  return (
    <div style={{ display: 'flex', gap: '12px', alignItems: 'center' }}>
      <button onClick={() => dispatch({ type: 'SUBTRACT' })}>-</button>
      <span>数量：{state.count}</span>
      <button onClick={() => dispatch({ type: 'ADD' })}>+</button>
      <button onClick={() => dispatch({ type: 'RESET' })}>重置</button>
    </div>
  );
}

const MyContext = React.createContext(defaultValue);
const value = useContext(MyContext);

import { createContext, useContext, useState } from 'react';

// 1. 创建 Context
const ThemeContext = createContext({ theme: 'light', toggleTheme: () => {} });

// 2. 提供者组件
function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');
  const toggleTheme = () => {
    setTheme((t) => (t === 'light' ? 'dark' : 'light'));
  };

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

// 3. 深层子组件消费
function ThemedButton() {
  const { theme, toggleTheme } = useContext(ThemeContext);
  const isDark = theme === 'dark';

  return (
    <button
      onClick={toggleTheme}
      style={{
        background: isDark ? '#333' : '#fff',
        color: isDark ? '#fff' : '#000',
        padding: '8px 16px',
        border: '1px solid #ccc',
        cursor: 'pointer',
      }}
    >
      当前主题：{theme}，点击切换
    </button>
  );
}

function Toolbar() {
  return <ThemedButton />; // 中间组件无需透传任何 props
}

// 4. 使用
export default function App() {
  return (
    <ThemeProvider>
      <Toolbar />
    </ThemeProvider>
  );
}

useEffect(() => {
  // 副作用逻辑
  return () => {
    // 清理逻辑（可选）
  };
}, [dependencies]);

import { useState, useEffect } from 'react';

function UserProfile() {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    let isMounted = true; // 防止组件卸载后依然 setState

    // 模拟异步请求
    const fetchData = async () => {
      try {
        const response = await new Promise((resolve) =>
          setTimeout(() => resolve({ name: '王五', age: 30 }), 2000)
        );
        if (isMounted) {
          setUser(response);
          setLoading(false);
        }
      } catch (error) {
        if (isMounted) setLoading(false);
      }
    };

    fetchData();

    // 清理函数：组件卸载时取消挂载标记
    return () => {
      isMounted = false;
    };
  }, []); // 仅在挂载时执行一次

  if (loading) return <p>加载中...</p>;
  return (
    <div>
      <h2>用户信息</h2>
      <p>姓名：{user.name}</p>
      <p>年龄：{user.age}</p>
    </div>
  );
}

const refContainer = useRef(initialValue);
// 使用：refContainer.current

import { useRef, useEffect } from 'react';

function AutoFocusInput() {
  const inputRef = useRef(null);

  useEffect(() => {
    inputRef.current.focus();
  }, []);

  return <input ref={inputRef} placeholder="页面加载后自动聚焦" />;
}

import { useRef, useState } from 'react';

function Timer() {
  const [seconds, setSeconds] = useState(0);
  const timerIdRef = useRef(null);

  const start = () => {
    if (timerIdRef.current) return; // 防止重复启动
    timerIdRef.current = setInterval(() => {
      setSeconds((prev) => prev + 1);
    }, 1000);
  };

  const stop = () => {
    clearInterval(timerIdRef.current);
    timerIdRef.current = null;
  };

  return (
    <div>
      <p>计时：{seconds} 秒</p>
      <button onClick={start}>开始</button>
      <button onClick={stop}>停止</button>
    </div>
  );
}

useImperativeHandle(ref, () => ({
  // 返回暴露的方法
}), [dependencies]);

import { forwardRef, useImperativeHandle, useRef, useState } from 'react';

// 子组件
const CustomInput = forwardRef((props, ref) => {
  const [value, setValue] = useState('');
  const inputRef = useRef(null);

  // 暴露方法给父组件
  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    },
    reset: () => {
      setValue('');
      inputRef.current.focus();
    },
    getValue: () => value,
  }));

  return (
    <input
      ref={inputRef}
      value={value}
      onChange={(e) => setValue(e.target.value)}
      placeholder="子组件输入框"
    />
  );
});

// 父组件
function ParentForm() {
  const childRef = useRef(null);

  const handleReset = () => {
    childRef.current.reset();
  };

  const handleGetValue = () => {
    alert(childRef.current.getValue());
  };

  return (
    <div>
      <CustomInput ref={childRef} />
      <button onClick={handleReset}>重置并聚焦</button>
      <button onClick={handleGetValue}>获取子组件值</button>
    </div>
  );
}

const memoizedValue = useMemo(() => compute(a, b), [a, b]);

import { useState, useMemo } from 'react';

function FilterList() {
  const [keyword, setKeyword] = useState('');
  const [count, setCount] = useState(0);

  // 模拟一个庞大的静态数据列表
  const allItems = useMemo(() => {
    const items = [];
    for (let i = 0; i < 20000; i++) {
      items.push(`商品-${i}`);
    }
    return items;
  }, []); // 只在首次渲染生成一次

  // 根据关键词过滤（仅当 keyword 或 allItems 变化时重新计算）
  const filteredItems = useMemo(() => {
    console.log('执行过滤计算...');
    if (!keyword) return allItems;
    return allItems.filter((item) => item.includes(keyword));
  }, [keyword, allItems]);

  return (
    <div>
      <input
        value={keyword}
        onChange={(e) => setKeyword(e.target.value)}
        placeholder="输入关键词过滤（体验丝滑输入）"
      />
      <button onClick={() => setCount((c) => c + 1)}>重渲染计数器：{count}</button>
      <ul style={{ height: '300px', overflow: 'auto', border: '1px solid #ccc' }}>
        {filteredItems.slice(0, 100).map((item) => (
          <li key={item}>{item}</li>
        ))}
        {filteredItems.length > 100 && <li>...仅显示前100条</li>}
      </ul>
    </div>
  );
}

const memoizedCallback = useCallback(() => {
  doSomething(a, b);
}, [a, b]);

import { useState, useCallback, memo } from 'react';

// 子组件用 memo 包裹，进行浅层 props 比较
const Child = memo(({ onAdd, label }) => {
  console.log(`Child ${label} 渲染了`);
  return <button onClick={onAdd}>增加 {label}</button>;
});

function Parent() {
  const [countA, setCountA] = useState(0);
  const [countB, setCountB] = useState(0);
  const [text, setText] = useState('');

  // 使用 useCallback 缓存，依赖为空，函数永远不变
  const handleAddA = useCallback(() => {
    setCountA((prev) => prev + 1);
  }, []);

  // 此处故意不使用 useCallback，每次渲染都会创建新函数
  const handleAddB = () => {
    setCountB((prev) => prev + 1);
  };

  return (
    <div>
      <input
        value={text}
        onChange={(e) => setText(e.target.value)}
        placeholder="在此输入，观察子组件渲染情况"
      />
      <p>Count A: {countA}</p>
      <p>Count B: {countB}</p>
      <Child onAdd={handleAddA} label="A (优化)" />
      <Child onAdd={handleAddB} label="B (未优化)" />
    </div>
  );
}

const MyComponent = memo(function MyComponent(props) {
  // 仅当 props 改变时才重新渲染
});