如何优化React轮播逻辑？避免使用3个useState重复代码

问题分析 #

原代码通过三个useState分别维护previousIndex、currentIndex、nextIndex，导致previous和next函数存在大量重复的边界判断逻辑，同时多状态维护增加了同步风险。

优化方案 #

只需要维护currentIndex一个核心状态，previousIndex和nextIndex完全可以通过currentIndex实时计算得出，无需单独存储。

优化后代码

import { useState } from 'react';

// 仅维护当前索引一个状态
const [currentIndex, setCurrentIndex] = useState(0);

// 通过当前索引计算上一张和下一张的索引，用取模处理循环边界
const previousIndex = (currentIndex - 1 + slides.length) % slides.length;
const nextIndex = (currentIndex + 1) % slides.length;

// 简化上一张切换逻辑
const previous = () => {
  // 使用函数式更新避免闭包问题
  setCurrentIndex(prev => (prev - 1 + slides.length) % slides.length);
};

// 简化下一张切换逻辑
const next = () => {
  setCurrentIndex(prev => (prev + 1) % slides.length);
};

优化关键点 #

• 减少状态数量：去掉多余的previousIndex和nextIndex状态，仅保留currentIndex，避免多状态同步的潜在问题
• 消除重复逻辑：用取模运算%统一处理循环边界（比如从第一张切到最后一张、最后一张切到第一张），替代原代码中的三元判断
• 函数式更新：更新状态时使用回调函数prev => ...，确保获取到最新的状态值，避免闭包陷阱

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