使用useState钩子基于Web动态添加状态以反应本机

import React, { useState } from 'react';

function DynamicStateExample() {
  // 初始化状态为一个空数组
  const [items, setItems] = useState([]);

  // 添加新项目的函数
  const addItem = () => {
    const newItem = `Item ${items.length + 1}`;
    setItems([...items, newItem]);
  };

  return (
    <div>
      <button onClick={addItem}>Add Item</button>
      <ul>
        {items.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

export default DynamicStateExample;

// 错误的做法
items.push(newItem);

// 正确的做法
setItems([...items, newItem]);

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

function OptimizedComponent() {
  const [count, setCount] = useState(0);

  // 使用 useCallback 缓存函数
  const increment = useCallback(() => {
    setCount(c => c + 1);
  }, []);

  return (
    <div>
      <button onClick={increment}>Increment</button>
      <p>Count: {count}</p>
    </div>
  );
}