React 速查表

组件

// 函数组件（推荐）
function Welcome({ name }) {
  return <h1>Hello, {name}!</h1>;
}

// 带 children
function Card({ children }) {
  return <div className="card">{children}</div>;
}

// 条件渲染
{isLoggedIn ? <Dashboard /> : <Login />}
{isLoading && <Spinner />}

Hooks

// useState
const [count, setCount] = useState(0);
setCount(count + 1);
setCount(prev => prev + 1);  // 基于前值

// useEffect
useEffect(() => {
  // 组件挂载时执行
  fetchData();
  return () => { /* 清理 */ };
}, []);  // 空数组 = 只执行一次
useEffect(() => { /* deps 变化时执行 */ }, [dep1, dep2]);

// useRef
const inputRef = useRef(null);
inputRef.current.focus();

// useMemo / useCallback
const memoized = useMemo(() => expensive(a, b), [a, b]);
const callback = useCallback(() => doSomething(a), [a]);

// useContext
const theme = useContext(ThemeContext);

// 自定义 Hook
function useWindowSize() {
  const [size, setSize] = useState({ w: 0, h: 0 });
  useEffect(() => {
    const handler = () => setSize({ w: window.innerWidth, h: window.innerHeight });
    window.addEventListener('resize', handler);
    return () => window.removeEventListener('resize', handler);
  }, []);
  return size;
}

事件处理

<button onClick={() => handleClick(id)}>点击</button>
<input onChange={e => setName(e.target.value)} />
<form onSubmit={e => { e.preventDefault(); submit(); }}>

列表渲染

{items.map(item => (
  <li key={item.id}>{item.name}</li>
))}

状态提升

// 父组件
function Parent() {
  const [value, setValue] = useState('');
  return <Child value={value} onChange={setValue} />;
}
// 子组件
function Child({ value, onChange }) {
  return <input value={value} onChange={e => onChange(e.target.value)} />;
}

路由 (React Router)

import { BrowserRouter, Routes, Route, Link, useParams, useNavigate } from 'react-router-dom';

<BrowserRouter>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/user/:id" element={<User />} />
  </Routes>
</BrowserRouter>

const { id } = useParams();
const navigate = useNavigate();
navigate('/home');