性能优化

const ExpensiveComponent = React.memo(({ data }) => {
  return <div>{/* 复杂渲染 */}</div>;
}, (prevProps, nextProps) => {
  // 返回 true 则不重新渲染
  return prevProps.data.id === nextProps.data.id;
});

function TodoList({ todos, filter }) {
  const filteredTodos = useMemo(() => {
    return todos.filter(todo => {
      // 复杂过滤逻辑
      return todo.status === filter;
    });
  }, [todos, filter]);

  return <List items={filteredTodos} />;
}

function Parent() {
  const [count, setCount] = useState(0);
  
  const handleClick = useCallback(() => {
    console.log('clicked');
  }, []); // 依赖为空，函数不会重新创建

  return <Child onClick={handleClick} />;
}

const Child = React.memo(({ onClick }) => {
  return <button onClick={onClick}>Click</button>;
});

import { FixedSizeList } from 'react-window';

function VirtualList({ items }) {
  const Row = ({ index, style }) => (
    <div style={style}>
      {items[index]}
    </div>
  );

  return (
    <FixedSizeList
      height={600}
      itemCount={items.length}
      itemSize={35}
      width="100%"
    >
      {Row}
    </FixedSizeList>
  );
}

import { lazy, Suspense } from 'react';

const HeavyComponent = lazy(() => import('./HeavyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <HeavyComponent />
    </Suspense>
  );
}

// ❌ 不好
<Component style={{ margin: 10 }} />

// ✅ 好
const style = { margin: 10 };
<Component style={style} />

// ✅ 使用稳定的 key
{items.map(item => (
  <Item key={item.id} data={item} />
))}

// ❌ 避免使用 index
{items.map((item, index) => (
  <Item key={index} data={item} />
))}

import { Profiler } from 'react';

function onRenderCallback(
  id, phase, actualDuration, baseDuration, 
  startTime, commitTime, interactions
) {
  console.log(`${id} took ${actualDuration}ms`);
}

<Profiler id="App" onRender={onRenderCallback}>
  <App />
</Profiler>

function SearchInput() {
  const [query, setQuery] = useState('');
  const debouncedQuery = useDebounce(query, 500);

  useEffect(() => {
    if (debouncedQuery) {
      searchAPI(debouncedQuery);
    }
  }, [debouncedQuery]);

  return (
    <input 
      value={query}
      onChange={e => setQuery(e.target.value)}
    />
  );
}