如何用React Hooks实现React Native中AsyncStorage数组存储逻辑？

Great question! Let's convert your class component logic into clean React Hooks code, step by step:

First, we'll use useState to manage the users state, useEffect to handle initial data loading (replacing componentDidMount), and useRef to track previous state values (to replicate the prevState check from componentDidUpdate).

Here's the full working implementation:

import { useState, useEffect, useRef } from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';

const YourComponent = () => {
  const [users, setUsers] = useState([]);
  // Track previous users state to avoid unnecessary saves
  const prevUsersRef = useRef([]);

  // Load saved users on component mount (equivalent to componentDidMount)
  useEffect(() => {
    const loadStoredUsers = async () => {
      try {
        const storedUsers = await AsyncStorage.getItem('users');
        if (storedUsers) {
          setUsers(JSON.parse(storedUsers));
        }
      } catch (err) {
        console.error('Failed to load users from storage:', err);
      }
    };

    loadStoredUsers();
  }, []);

  // Save users whenever the state changes (equivalent to componentDidUpdate)
  useEffect(() => {
    // Only run if users state has actually changed from the previous value
    if (prevUsersRef.current !== users) {
      const saveUsersToStorage = async () => {
        try {
          await AsyncStorage.setItem('users', JSON.stringify(users));
        } catch (err) {
          console.error('Failed to save users to storage:', err);
        }
      };

      saveUsersToStorage();
    }

    // Update the ref with current users for next render's comparison
    prevUsersRef.current = users;
  }, [users]);

  // Rest of your component logic goes here...
  return (
    // Your component JSX
  );
};

export default YourComponent;

Quick Breakdown of Key Parts: #

• useState: Replaces this.state and this.setState for managing the users array state.
• First useEffect (empty dependency array): Runs exactly once when the component mounts, just like componentDidMount. It fetches stored users and updates the state if data exists.
• useRef for prevUsersRef: Refs are perfect for storing previous state values because they don't trigger re-renders. We use this to compare the current users state to its prior value, avoiding redundant AsyncStorage writes (like the initial load from storage).
• Second useEffect (depends on users): Runs every time the users state changes, mimicking componentDidUpdate. We only trigger the save if the state actually changed, then update the ref for future comparisons.
• Error Handling: Added try/catch blocks around AsyncStorage calls to catch and log potential issues—this is a small but important practice for production code!

内容的提问来源于stack exchange，提问作者Bruno Araujo