React性能优化三剑客之useMemo、memo与useCallback详解

function App() {
  const [count, setCount] = useState(0);
  const [keyword, setKeyword] = useState('');
  const list = ['apple', 'banana', 'orange', 'pear'];
  // 问题就在这里！
  const filterList = list.filter(item => {
    console.log('filter 执行');
    return item.includes(keyword);
  });
  return (
    <div>
      {count}
      <button onClick={() => setCount(count + 1)}>count + 1</button>
      <input 
        type="text" 
        value={keyword} 
        onChange={e => setKeyword(e.target.value)} 
      />
      {filterList.map(item => (
        <li key={item}>{item}</li>
      ))}
    </div>
  )
}

const filterList = useMemo(() => {
  console.log('filter 执行');
  return list.filter(item => item.includes(keyword));
}, [keyword]); // 仅当keyword变化时重新计算

function slowSum(n) {
  console.log('计算中...');
  let sum = 0;
  for(let i = 0; i <= n*10000000; i++) {
    sum += i;
  }
  return sum;
}
function App() {
  const [num, setNum] = useState(0);
  // 优化前：每次组件渲染都会执行slowSum
  const result = slowSum(num);
  // 优化后：只在num变化时重新计算
  const result = useMemo(() => {
    return slowSum(num);
  }, [num]);
  return (
    <div>
      <button onClick={() => setNum(num + 1)}>num + 1</button>
      <p>num: {result}</p>
    </div>
  )
}

function Child({ count }) {
  console.log('child 重新渲染');
  return <div>子组件 count: {count}</div>
}
function App() {
  const [count, setCount] = useState(0);
  const [num, setNum] = useState(0);
  return (
    <div>
      {count}
      <button onClick={() => setCount(count + 1)}>count + 1</button>
      {num}
      <button onClick={() => setNum(num + 1)}>num + 1</button>
      <Child count={count} />
    </div>
  )
}

const Child = memo(({ count }) => {
  console.log('child 重新渲染');
  return <div>子组件 count: {count}</div>
})

const Child = memo(({ count, handleClick }) => {
  console.log('child 重新渲染');
  return <div onClick={handleClick}>子组件 count: {count}</div>
})
function App() {
  const [count, setCount] = useState(0);
  // 每次组件渲染都会创建新函数
  const handleClick = () => {
    console.log('click');
  }
  return (
    <div>
      {count}
      <button onClick={() => setCount(count + 1)}>count + 1</button>
      <Child count={count} handleClick={handleClick} />
    </div>
  )
}

const handleClick = useCallback(() => {
  console.log('click');
}, []); // 依赖数组为空，函数永远不会重新创建

const handleClick = useCallback(() => {
  console.log('click', count);
}, [count]); // 仅当count变化时重新创建函数

const ParentComponent = () => {
  const [searchTerm, setSearchTerm] = useState('');
  const [userList, setUserList] = useState([]);
  const [theme, setTheme] = useState('light');
  // 优化1: 使用useMemo缓存过滤结果
  const filteredUsers = useMemo(() => {
    return userList.filter(user => 
      user.name.toLowerCase().includes(searchTerm.toLowerCase())
    );
  }, [userList, searchTerm]);
  // 优化2: 使用useCallback确保函数引用稳定性
  const handleUserClick = useCallback((userId) => {
    // 处理用户点击
  }, []);
  // 优化3: 使用memo防止不必要的子组件渲染
  const UserList = memo(({ users, onUserClick }) => {
    return (
      <div>
        {users.map(user => (
          <UserItem 
            key={user.id} 
            user={user} 
            onClick={() => onUserClick(user.id)} 
          />
        ))}
      </div>
    );
  });
  return (
    <div>
      <SearchBar value={searchTerm} onChange={setSearchTerm} />
      <ThemeToggle theme={theme} onToggle={setTheme} />
      <UserList users={filteredUsers} onUserClick={handleUserClick} />
    </div>
  );
};