@dsh-prose/hooks

react 自定义 hooks

useParamsFreeze 文件。冻结参数，避免 hooks 依赖参数时频繁刷新

import React, { useState, useEffect } from 'react';
import useParamsFreeze from '@dsh/hooks/lib/useParamsFreeze'

function Example() {
  const [count, setCount] = useState(0);
  const freeze = useParamsFreeze({ count });

  useEffect(()=>{
    console.log('freeze', freeze)
    // 冻结之后，即便是这样写，也不会触发副作用的更新
  }, [freeze])

  return (
    <div>
      <div>{count}</div>
      <button
        onClick={() => setCount(count + 1)}
      >++</button>
    </div>
  )
}

usePreviousValues 文件。记录useState上一个状态

import React, { useState } from 'react';
import usePreviousValues from '@dsh-prose/hooks/lib/usePreviousValues'

function Example() {
  const [count, setCount] = useState(0);
  const prevCount = usePreviousValues(count);

  return (
    <div>
      <div>{count}  {prevCount}</div>
      <button
        onClick={() => setCount(count + 1)}
      >++</button>
    </div>
  )
}