面试题：React Hooks复杂状态管理下的异常处理与可维护性提升

处理异常情况

异步操作失败

使用try - catch处理异步操作：在使用useEffect进行异步操作时，可以使用try - catch块捕获异常。例如，假设我们有一个从API获取数据的异步操作：

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

const MyComponent = () => {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('https://example.com/api/data');
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        const result = await response.json();
        setData(result);
      } catch (error) {
        setError(error.message);
      }
    };
    fetchData();
  }, []);

  if (error) {
    return <div>{error}</div>;
  }
  if (!data) {
    return <div>Loading...</div>;
  }

  return <div>{JSON.stringify(data)}</div>;
};

export default MyComponent;

使用自定义Hook封装异步操作：为了提高代码的复用性，可以将异步操作封装成自定义Hook。

import { useEffect, useState } from'react';

const useAsync = (asyncFunction) => {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(false);

  const execute = async () => {
    setLoading(true);
    try {
      const result = await asyncFunction();
      setData(result);
    } catch (error) {
      setError(error.message);
    } finally {
      setLoading(false);
    }
  };

  return { data, error, loading, execute };
};

const MyComponent = () => {
  const { data, error, loading, execute } = useAsync(() =>
    fetch('https://example.com/api/data').then((response) => {
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
      return response.json();
    })
  );

  useEffect(() => {
    execute();
  }, [execute]);

  if (error) {
    return <div>{error}</div>;
  }
  if (loading) {
    return <div>Loading...</div>;
  }
  if (!data) {
    return null;
  }

  return <div>{JSON.stringify(data)}</div>;
};

export default MyComponent;

状态更新冲突

使用useReducer代替useState：useReducer可以更好地管理复杂状态的更新逻辑，避免状态更新冲突。例如，假设我们有一个购物车，需要处理添加商品、删除商品等操作。

import React, { useReducer } from'react';

const cartReducer = (state, action) => {
  switch (action.type) {
    case 'ADD_ITEM':
      return [...state, action.item];
    case 'REMOVE_ITEM':
      return state.filter((item) => item.id!== action.id);
    default:
      return state;
  }
};

const ShoppingCart = () => {
  const [cart, dispatch] = useReducer(cartReducer, []);

  const addItem = (item) => {
    dispatch({ type: 'ADD_ITEM', item });
  };

  const removeItem = (id) => {
    dispatch({ type: 'REMOVE_ITEM', id });
  };

  return (
    <div>
      <ul>
        {cart.map((item) => (
          <li key={item.id}>
            {item.name} - <button onClick={() => removeItem(item.id)}>Remove</button>
          </li>
        ))}
      </ul>
      <button onClick={() => addItem({ id: 1, name: 'Sample Item' })}>Add Item</button>
    </div>
  );
};

export default ShoppingCart;

使用useEffect依赖项控制状态更新：确保useEffect依赖项数组的正确性，避免不必要的状态更新导致冲突。例如：

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

const MyComponent = () => {
  const [count, setCount] = useState(0);
  const [otherValue, setOtherValue] = useState('');

  useEffect(() => {
    // 只在count变化时执行此副作用
    console.log('Count has changed:', count);
  }, [count]);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increment Count</button>
      <input
        value={otherValue}
        onChange={(e) => setOtherValue(e.target.value)}
        placeholder="Enter something"
      />
    </div>
  );
};

export default MyComponent;

设计Hook的结构和逻辑

单一职责原则：每个Hook应该只负责一项具体的功能。例如，上面的useAsync Hook只负责处理异步操作，而不应该同时包含与异步操作无关的逻辑。
代码复用：通过封装通用逻辑到自定义Hook，可以提高代码的复用性。例如，在多个组件中都需要进行异步数据获取时，可以复用useAsync Hook。
分层设计：对于大规模的状态变化和业务逻辑调整，可以采用分层设计。例如，将与用户认证相关的逻辑封装在一个useAuth Hook中，与数据获取相关的逻辑封装在useDataFetch Hook中，这样不同层次的逻辑相互独立，便于维护和拓展。

文档化：为自定义Hook添加清晰的文档，说明其功能、参数、返回值以及使用场景。例如：

/**
 * useAsync - A custom hook to handle asynchronous operations.
 * @param {Function} asyncFunction - The asynchronous function to be executed.
 * @returns {Object} An object containing data, error, loading state and an execute function.
 *  - data: The result of the asynchronous operation (null if not yet fetched or in case of error).
 *  - error: The error message if the asynchronous operation fails (null if no error).
 *  - loading: A boolean indicating whether the asynchronous operation is in progress.
 *  - execute: A function to execute the asynchronous operation.
 */
const useAsync = (asyncFunction) => {
  //...
};

星途面试题库

面试题：React Hooks复杂状态管理下的异常处理与可维护性提升

知识考点

面试题答案

处理异常情况

设计Hook的结构和逻辑