利用 React 的力量：useState 和 useEffect 綜合指南

useState 的高階用例

1. 管理陣列和對象

在處理狀態陣列和物件時，您需要確保它們的更新是不可變的。這可以防止可能導致錯誤的不必要的突變。

管理物件陣列

const [items, setItems] = useState([{ id: 1, name: 'Item 1' }]);

const addItem = (newItem) => {
  setItems(prevItems => [...prevItems, newItem]);
};

const removeItem = (id) => {
  setItems(prevItems => prevItems.filter(item => item.id !== id));
};

更新狀態中的物件

const [user, setUser] = useState({ name: '', age: 0 });

const updateUser = (field, value) => {
  setUser(prevUser => ({ ...prevUser, [field]: value }));
};

2. 功能更新

將功能更新與 useState 結合使用可以幫助您避免依賴當前狀態時出現問題，尤其是在非同步情況下。

const increment = () => {
  setCount(prevCount => prevCount + 1);
};

3. 延遲初始化

您可以使用函數設定初始狀態，這對於昂貴的計算或初始值從 props 派生時非常有用。

const [count, setCount] = useState(() => {
  const savedCount = localStorage.getItem('count');
  return savedCount ? JSON.parse(savedCount) : 0;
});

useState 的常見模式

1. 受控組件

在表單中使用 useState 來控制輸入：

const Form = () => {
  const [formData, setFormData] = useState({ name: '', email: '' });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData(prevData => ({ ...prevData, [name]: value }));
  };

  return (
    <form>
      <input
        type="text"
        name="name"
        value={formData.name}
        onChange={handleChange}
      />
      <input
        type="email"
        name="email"
        value={formData.email}
        onChange={handleChange}
      />
    </form>
  );
};

2. 去抖輸入

您可以使用 useState 和 useEffect 來建立去抖輸入：

const DebouncedInput = () => {
  const [inputValue, setInputValue] = useState('');
  const [debouncedValue, setDebouncedValue] = useState(inputValue);

  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(inputValue);
    }, 300);

    return () => {
      clearTimeout(handler);
    };
  }, [inputValue]);

  return (
    <input
      type="text"
      value={inputValue}
      onChange={(e) => setInputValue(e.target.value)}
    />
  );
};

useEffect 的高階用例

1. 取消獲取數據

取得資料時，最好處理組件卸載，以避免在已卸載的組件上設定狀態。

useEffect(() => {
  let isMounted = true;

  const fetchData = async () => {
    const response = await fetch('https://api.example.com/data');
    const result = await response.json();
    if (isMounted) {
      setData(result);
    }
  };

  fetchData();

  return () => {
    isMounted = false; // Cleanup
  };
}, []);

2. 訂閱活動

您可以訂閱 WebSocket 連線或其他外部資料來源等事件。

useEffect(() => {
  const socket = new WebSocket('ws://example.com/socket');

  socket.onmessage = (event) => {
    const message = JSON.parse(event.data);
    setMessages(prevMessages => [...prevMessages, message]);
  };

  return () => {
    socket.close(); // Cleanup on unmount
  };
}, []);

3. 動畫和 DOM 操作

您可以使用 useEffect 進行動畫或直接 DOM 操作：

useEffect(() => {
  const element = document.getElementById('animate');
  element.classList.add('fade-in');

  return () => {
    element.classList.remove('fade-in'); // Cleanup
  };
}, []);

常見陷阱

1. 缺少依賴數組

如果省略相依性數組，您的效果將在每次渲染後運行，可能會導致效能問題。

// Avoid this if you only want it to run once
useEffect(() => {
  // Logic here
});

2. 不正確的依賴列表

確保包含效果中使用的所有變數：

useEffect(() => {
  console.log(value); // Make sure 'value' is included in the dependency array
}, [value]); // Include all dependencies

3. 根據之前的狀態更新狀態

在根據先前的值更新狀態時，請務必使用 setter 的函數形式，以避免過時的閉包：

setCount(prevCount => prevCount + 1); // Correct

結論

useState 和 useEffect 都是 React 中必不可少的鉤子，可讓您有效管理狀態並處理功能元件中的副作用。了解進階用例和模式可以幫助您編寫更清晰、更有效率的 React 程式碼。

以上是利用 React 的力量：useState 和 useEffect 綜合指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！