React-hooks 自定义分享（这里有你想要的自定义hooks）

最近忙到飞起，完全没有时间写文章，对于我这种很自觉的博主怎么能行呢，好吧，宝贝们，今天给大家更新两个工作中常用的hooks的一些高级用法。

useLastData

无论在地方，获取到我们最新的state，但此hook不会引起页面重新render

// 使用ref在组件内部生成唯一内存地址，在函数组件卸载的时候，拿到最新的state
const useLastState = (params: Record<string, any>): RefObject<Record<string, any>> => {
  const ref_Obj = useRef<Record<string, any>>({})
  for (const key in params) {
    ref_Obj.current[`last_${key}`] = params[key]
  }
  return ref_Obj
}

实际使用案例

const Com = (props: Props) => {
  const [res, setRes] = useState(0)
  const lastData = useLastState({res})
  // 在useEffect中不需要监听我们的依赖，即可在组件卸载的的时候获取到最新的state
  useEffect(() => {
    return () => {
      console.log(lastData.current?.last_res)
    }
  }, [])
  return (
    <div>
      <Button onClick={() => {
        setRes(res + 1)
      }}>
        点我
      </Button>
    </div>
  )
}

export default Com

useUpdateEffect

在我们的业务开发中，有时候需要我们的effect只有当依赖发生变化的时候才执行副作用函数

const useUpdateEffect = (callback: () => void, deps: any[] = [], returnCallback?: () => void) => {
  const ref_judge = useRef<boolean>(false)
  useEffect(() => {
    if (ref_judge.current) {
      callback()
    }
    else {
      ref_judge.current = true
    }
    return () => {
      returnCallback?.()
    }
  }, [...deps])
}

实际使用案例

const Com = (props: Props) => {
  const [res, setRes] = useState(0)
  const lastData = useLastState({res})
  useUpdateEffect(() =>{
    console.log(123)
  },[res])
  return (
    <div>
      <Button onClick={() => {
        setRes(res + 1)
      }}>
        点我
      </Button>
    </div>
  )
}

useAsyncMemo

在我们的业务开发中，有时候会有一些异步操作，同时根据异步返回的值，生成一个新的值，不用每次写一个新的变量

const useAsyncMemo = (callBackFn: () => any, deps: any[]) => {
  const [res, setRes] = useState<any>()
  useEffect(() => {
      ; (async () => {
          const currentRes = await callBackFn()
          if (currentRes) setRes(currentRes)
      })()
  }, deps)
  return res
}

实际使用案例

const Com = (props: Props) => {
  const [count, setCount] = useState(0)
  const asyncFun = async () =>{
    return 123
  }
  const newRes = useAsyncMemo(asyncFun, [count])
  return (
    <div>
      <Button onClick={() => {
        setCount(count + 1)
      }}>
        点我
      </Button>
      newRes:{newRes}
    </div>
  )
}

useAsyncEffect

希望在我们的useEffect中做一些异步操作，而不用直接写 自调用的async函数

const useAsyncEffect = (callBackFn: () => any, deps: any[], returnCallback?: () => void) => {
  useEffect(() => {
    callBackFn()
    return () => {
      returnCallback?.()
    }
  }, [...deps])
}

实际使用案例

const Com = (props: Props) => {
  const [count, setCount] = useState(0)
 const asyncFun = async () => {
    return 123
  }
  const requestData = async () => {
    const res = await asyncFun()
    setCount(res)
  }
  useAsyncEffect(requestData, [])
  return (
    <div>
      <Button onClick={() => {
        setCount(count + 1)
      }}>
        点我
      </Button>
      count:{count}
    </div>
  )
}

等我空了持续更新其他的高级用法，，，，大家如果有什么问题，或者建议，欢迎大家留言！！！