手动实现历史状态管理hooks

import { useState,useEffect } from 'react'

export function useHistoryTravel<S>(initData?: S){
  const [valueList,setValueList] = useState<any[]>([])
  const [value,setV] = useState<any>()
  const [currentIdx,setCurrentIdx] = useState<number>(-1)

  const backLength = currentIdx
  const forwardLength = valueList.length -1 - currentIdx

  const setValue = (data: any)=>{
    const newData = valueList.slice(0,currentIdx+1)
    setValueList([...newData,data])
  }

  useEffect(()=>{
    if(initData){
      setValueList([initData])
    }
  },[])

  const back = () => {
    if(backLength>0){
      setCurrentIdx(currentIdx-1)
    }
  }

  const forward = ()=>{
    if(forwardLength>0){
      setCurrentIdx(currentIdx+1)
    }
  }

  const go = (step: number)=>{
    if(step>0){
      const newIdx = currentIdx+step>=valueList.length-1?valueList.length-1:currentIdx+step
      setCurrentIdx(newIdx)
    }
    if(step<0){
      const newIdx = currentIdx+step<=0?0:currentIdx+step
      setCurrentIdx(newIdx)
    }
  }

  const reset = ()=>{
    if(initData){
      setValueList([initData])
    }else{
      setValueList([])
    }
  }


  useEffect(()=>{
    if(valueList.length){
      setCurrentIdx(valueList.length-1)
    }else{
      setCurrentIdx(0)
    }
  },[valueList])


  useEffect(()=>{
    if(currentIdx>=0){
      setV(valueList[currentIdx])
    }else{
      setV(initData)
    }
  },[currentIdx])

  // 如果是backLength<=0 或者forwardLength<=0  则不会触发back和forward事件

  return {
    value,
    setValue,
    back,
    forward,
    go,
    reset,
    backLength,
    forwardLength,
  }
}