开源工具，Github开源项目排行

搜索 TinyTools

生命周期

生命周期

useEffectOnce

React的生命周期钩子，只运行一次效果。

Usage

jsx 复制代码 
import {useEffectOnce} from 'react-use';

const Demo = () => {
  useEffectOnce(() => {
    console.log('Running effect once on mount')

    return () => {
      console.log('Running clean-up of effect on unmount')
    }
  });

  return null;
};

Reference

js 复制代码 
useEffectOnce(effect: EffectCallback);

useEvent

React传感器钩子，它为事件订阅handler。

Usage

jsx 复制代码 
import useEvent from 'react-use/lib/useEvent';
import useList from 'react-use/lib/useList';

const Demo = () => {
  const [list, {push, clear}] = useList();

  const onKeyDown = useCallback(({key}) => {
    if (key === 'r') clear();
    push(key);
  }, []);

  useEvent('keydown', onKeyDown);

  return (
    <div>
      <p>
        Press some keys on your keyboard, <code style={{color: 'tomato'}}>r</code> key resets the list
      </p>
      <pre>
        {JSON.stringify(list, null, 4)}
      </pre>
    </div>
  );
};

Examples

js 复制代码 
useEvent('keydown', handler)
useEvent('scroll', handler, window, {capture: true})

useLifecycles

当组件挂载和卸载时，React 生命周期钩子分别调用 mount 和 unmount 回调。

用法

jsx 复制代码 
import {useLifecycles} from 'react-use';

const Demo = () => {
  useLifecycles(() => console.log('MOUNTED'), () => console.log('UNMOUNTED'));
  return null;
};

参考

js 复制代码 
useLifecycles(mount, unmount);

useRefMounted

生命周期钩子，用于跟踪组件是否已安装。返回一个引用，该引用具有 布尔值 .current 属性。

用法

jsx 复制代码 
import {useRefMounted} from 'react-use';

const Demo = () => {
  const refMounted = useRefMounted();

  useEffect(() => {
    setTimeout(() => {
      if (refMounted.currrent) {
        // ...
      } else {
        // ...
      }
    }, 1000);
  });
};

usePromise

React Lifecycle钩子，它返回一个包装promises的辅助函数。

使用此函数包装的 Promises 将仅在安装组件时进行解析。

Usage

jsx 复制代码 
import {usePromise} from 'react-use';

const Demo = ({promise}) => {
  const mounted = usePromise();
  const [value, setValue] = useState();

  useEffect(() => {
    (async () => {
      const value = await mounted(promise);
      // This line will not execute if <Demo> component gets unmounted.
      setValue(value);
    })();
  });
};

useLogger

React生命周期钩子，在生命周期中作为组件转换记录到控制台。

用法

jsx 复制代码 
import {useLogger} from 'react-use';

const Demo = (props) => {
  useLogger('Demo', props);
  return null;
};

Example Output

复制代码 
Demo mounted
Demo props updated {}
Demo un-mounted

参考

js 复制代码 
useLogger(name, props);
  • name — component name.
  • props — latest props.

useMount

当组件被挂载时，响应调用 mount 回调的生命周期钩子。

用法

jsx 复制代码 
import {useMount} from 'react-use';

const Demo = () => {
  useMount(() => console.log('MOUNTED'));
  return null;
};

参考

js 复制代码 
useMount(mount);

useUnmount

当组件被卸载时，调用 unmount 回调的生命周期钩子。

用法

jsx 复制代码 
import {useUnmount} from 'react-use';

const Demo = () => {
  useUnmount(() => console.log('UNMOUNTED'));
  return null;
};

参考

js 复制代码 
useUnmount(mount);

useUpdateEffect

React effect hook that ignores the first invocation (e.g. on mount). The signature is exactly the same as the useEffect hook.

忽略第一次调用的 react 副作用钩子（例如在 mount 上）。 标记与useEffect钩子完全相同。

Usage

jsx 复制代码 
import React from 'react'
import {useUpdateEffect} from 'react-use';

const Demo = () => {
  const [count, setCount] = React.useState(0);
  
  React.useEffect(() => {
    const interval = setInterval(() => {
      setCount(count => count + 1)
    }, 1000)
    
    return () => {
      clearInterval(interval)
    }
  }, [])
  
  useUpdateEffect(() => {
    console.log('count', count) // will only show 1 and beyond
    
    return () => { // *OPTIONAL*
      // do something on unmount
    }
  }) // you can include deps array if necessary

  return <div>Count: {count}</div>
};

useDeepCompareEffect

一个修改的 useEffect 钩子，它使用对其依赖项的深度比较而不是引用的相等性。

Usage

jsx 复制代码 
import {useCounter, useDeepCompareEffect} from 'react-use';

const Demo = () => {
  const [count, {inc: inc}] = useCounter(0);
  const options = { step: 2 };

  useDeepCompareEffect(() => {
    inc(options.step)
  }, [options]);

  return (
    <div>
      <p>useDeepCompareEffect: {count}</p>
    </div>
  );
};

Reference

ts 复制代码 
useDeepCompareEffect(effect: () => void | (() => void | undefined), deps: any[]);

React Hook

传感器
用户界面
动画效果
副作用
生命周期
状态