基于React自定义Hook优化关键词搜索API数据获取问题咨询

嘿，这个问题我之前帮好几个开发者捋过，咱们一步步拆解解决～

首先得明确问题根源：你当前的useCourseList Hook里，只要searchString变化就会触发API请求，而且不管返回的课程数据和现有状态是否完全一致，都会直接调用setCourses。由于API返回的数组是新的引用（哪怕内容一模一样），React的useState只要收到set调用，就会触发组件重新渲染，这就是为啥输入"G""Ga""Gam""Game"时，明明数据没变化，UI还是闪了4次。

解决方案1：对比数据后再更新状态 #

核心思路是：只有当新返回的课程数据和当前courses状态内容完全不同时，才去更新状态。这里需要用深比较（浅比较courses === nextCourses肯定不成立，因为API返回的是新数组）。

你可以用lodash的isEqual方法（简单省心），或者自己实现一个针对课程数据的比较逻辑：

用lodash的实现方式

import { useState, useEffect } from 'react';
import _ from 'lodash';

function useCourseList(searchString) {
  const [courses, setCourses] = useState([]);

  useEffect(() => {
    function handleCourseListUpdating(nextCourses) {
      // 深比较新旧数据，只有不同时才更新状态
      if (!_.isEqual(courses, nextCourses)) {
        setCourses(nextCourses);
      }
    }

    getCourses(searchString, handleCourseListUpdating);

    return () => {
      setCourses([]);
    };
  }, [searchString, courses]); // 注意把courses加入依赖，因为比较时用到了它

  return courses;
}

自定义比较逻辑（无需额外依赖）

如果你的课程对象有唯一标识（比如id），可以自己写一个轻量的比较函数：

function areCoursesEqual(oldCourses, newCourses) {
  if (oldCourses.length !== newCourses.length) return false;
  // 对比每一项的核心属性
  return oldCourses.every((oldCourse, index) => {
    const newCourse = newCourses[index];
    return oldCourse.id === newCourse.id && 
           oldCourse.title === newCourse.title &&
           oldCourse.description === newCourse.description;
  });
}

// 然后在handle函数里替换成这个自定义方法
if (!areCoursesEqual(courses, nextCourses)) {
  setCourses(nextCourses);
}

解决方案2：给搜索请求加防抖（额外优化） #

除了避免无效的状态更新，还能减少不必要的API请求。用户输入时，比如输入"Game"会触发4次请求，其实等用户停止输入300ms左右再发起请求，既节省服务器资源，也能进一步减少UI更新次数。

结合防抖修改Hook：

import { useState, useEffect, useCallback } from 'react';
import _ from 'lodash';

function useCourseList(searchString) {
  const [courses, setCourses] = useState([]);

  // 创建防抖的请求函数，300ms内连续输入不会重复发起请求
  const debouncedFetchCourses = useCallback(
    _.debounce((search) => {
      getCourses(search, (nextCourses) => {
        if (!_.isEqual(courses, nextCourses)) {
          setCourses(nextCourses);
        }
      });
    }, 300),
    [courses]
  );

  useEffect(() => {
    debouncedFetchCourses(searchString);

    // 清理函数：取消未执行的防抖请求，避免旧请求覆盖新结果
    return () => {
      debouncedFetchCourses.cancel();
      setCourses([]);
    };
  }, [searchString, debouncedFetchCourses]);

  return courses;
}

关于当前数据流程的问题 #

你的基础流程是通顺的，但有几个可以优化的点：

1. 缺乏数据校验：没有判断返回数据是否和现有状态一致，导致无效的状态更新和组件渲染；
2. 频繁请求触发：用户每输入一个字符就发起一次请求，浪费资源且加剧UI闪烁；
3. 请求竞态风险：如果前一个请求还在pending状态，新的请求已经发起，可能出现旧请求晚返回、覆盖新请求结果的问题。可以通过AbortController取消未完成的请求来解决（如果你的getCourses支持传入信号参数）：

useEffect(() => {
  const controller = new AbortController();
  const signal = controller.signal;

  function handleCourseListUpdating(nextCourses) {
    if (!_.isEqual(courses, nextCourses)) {
      setCourses(nextCourses);
    }
  }

  getCourses(searchString, handleCourseListUpdating, signal); // 假设getCourses支持signal参数

  return () => {
    controller.abort(); // 取消未完成的请求
    setCourses([]);
  };
}, [searchString, courses]);

内容的提问来源于stack exchange，提问作者David Kesfaw