TypeScript react.useEffect函数代码示例

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› TypeScript›TypeScript教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

本文整理汇总了TypeScript中react.useEffect函数的典型用法代码示例。如果您正苦于以下问题：TypeScript useEffect函数的具体用法？TypeScript useEffect怎么用？TypeScript useEffect使用的例子？那么恭喜您, 这里精选的函数代码示例或许可以为您提供帮助。

在下文中一共展示了useEffect函数的10个代码示例，这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞，您的评价将有助于我们的系统推荐出更棒的TypeScript代码示例。

示例1: useState

export const useQuery = (value: string): Output => {
  const [result, setResult] = useState<Result>([]);
  const [loading, setLoading] = useState(false);
  const [loaded, setLoaded] = useState(false);
  const debounce = useRef<any>(null);

  useEffect(() => {
    worker.load().then(() => {
      setLoaded(true);
    });
  }, []);

  useEffect(
    () => {
      if (!value) return;

      if (debounce.current) {
        clearTimeout(debounce.current);
      }

      setLoading(true);

      debounce.current = setTimeout(() => {
        worker.solve(value).then((data: any) => {
          setResult(data);
          setLoading(false);
        });
      }, 140);
    },
    [value],
  );

  return { loaded, loading, data: result };
};

开发者ID:kerlends，项目名称:word-solver，代码行数:34，代码来源:useQuery.ts

示例2: useDragDropManager

export function useDragLayer<CollectedProps>(
	collect: (monitor: DragLayerMonitor) => CollectedProps,
): CollectedProps {
	const dragDropManager = useDragDropManager()
	const monitor = dragDropManager.getMonitor()
	const [collected, updateCollected] = useCollector(monitor, collect)

	useEffect(() => monitor.subscribeToOffsetChange(updateCollected))
	useEffect(() => monitor.subscribeToStateChange(updateCollected))
	return collected
}

开发者ID:gaearon，项目名称:react-dnd，代码行数:11，代码来源:useDragLayer.ts

示例3: useContext

export function useStorage<T>(key: string, defaultValue: T) {
  const storage = useContext(StorageContext)
  const [value, set] = useState(() => load(storage, key, defaultValue))

  useEffect(() => {
    store(storage, key, value)
  }, [value])

  useEffect(() => {
    set(load(storage, key, defaultValue))
  }, [key, storage])

  return [value, set] as const
}

开发者ID:8th713，项目名称:cockpit-for-pixiv，代码行数:14，代码来源:useStorage.ts

示例4: useIntersectionObserver

export function useIntersectionObserver(
  target: React.RefObject<HTMLElement>,
  root: React.RefObject<HTMLElement>,
  options: IntersectionObserverInit
) {
  const [isIntersecting, setIntersecting] = useState(false);

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting !== isIntersecting) {
          setIntersecting(entry.isIntersecting);
        }
      },
      {
        root: root.current,
        // rootMargin: '0px 0px 0px 0px',
        // threshold: 0,
        ...options,
      }
    );
    if (target.current) {
      observer.observe(target.current);
    }
    return () => {
      if (target.current) {
        observer.unobserve(target.current);
      }
    };
  }, []);

  return isIntersecting;
}

开发者ID:LWJGL，项目名称:lwjgl3-www，代码行数:33，代码来源:useIntersectionObserver.ts

示例5: useField

export default function useField(name: string) {
  const {
    initialData,
    errors,
    scopePath,
    unregisterField,
    registerField
  } = useContext(FormContext);

  const fieldName = scopePath ? `${scopePath}.${name}` : name;

  useEffect(() => {
    return () => unregisterField(fieldName);
  }, []);

  const defaultValue = dot.pick(fieldName, initialData);
  const error = errors[fieldName];

  return {
    fieldName,
    registerField,
    defaultValue,
    error
  };
}

开发者ID:isacmoura，项目名称:unform，代码行数:25，代码来源:useField.ts

示例6: usePageVisibility

export function usePageVisibility() {
  const [visible, setVisible] = useState(getVisibility());

  useEffect(() => {
    const handler = () => setVisible(getVisibility());
    let visibilityChange: string;

    if (typeof document.hidden !== 'undefined') {
      // Opera 12.10 and Firefox 18 and later support
      visibilityChange = 'visibilitychange';
    } else if (
      //@ts-ignore
      typeof document.msHidden !== 'undefined'
    ) {
      visibilityChange = 'msvisibilitychange';
    } else if (
      //@ts-ignore
      typeof document.webkitHidden !== 'undefined'
    ) {
      visibilityChange = 'webkitvisibilitychange';
    } else {
      return;
    }

    document.addEventListener(visibilityChange, handler);
    return () => document.removeEventListener(visibilityChange, handler);
  }, []);

  return visible;
}

开发者ID:LWJGL，项目名称:lwjgl3-www，代码行数:30，代码来源:usePageVisibility.ts

示例7: useCanvas

export function useCanvas(
    width: number,
    height: number,
    sourceCanvasRef?: RefObject<HTMLCanvasElement>
): [
    HTMLCanvasElement | null,
    CanvasRenderingContext2D | null,
    (ctx: CanvasRenderingContext2D) => void
] {
    const [canvas, setCanvas] = useState<HTMLCanvasElement | null>(null);
    const [ctx, setCtx] = useState<CanvasRenderingContext2D | null>(null);

    useEffect(() => {
        const canvas = sourceCanvasRef
            ? sourceCanvasRef.current!
            : document.createElement('canvas');
        canvas.width = width;
        canvas.height = height;
        const ctx = canvas.getContext('2d')!;
        setCanvas(canvas);
        setCtx(ctx);
    }, []);

    return [canvas, ctx, setCtx];
}

开发者ID:alcarin-org，项目名称:alcarin，代码行数:25，代码来源:CanvasUtils.ts

示例8: useEffect

export function useApiFetcher<T>(
  fetcher: () => Promise<T>,
  inputs: InputIdentityList,
): T | null {
  const [result, setResult] = useState<T | null>(null)

  useEffect(() => {
    let cancelled = false
    ;(async () => {
      try {
        const result = await fetcher()
        if (!cancelled) setResult(result)
      } catch (e) {
        if (cancelled) return

        if (e instanceof NotAuthedError) {
          authService.setLoginRedirectUrl(history.location.pathname)
          history.push('/login')
        } else {
          throw e
        }
      }
    })()

    return () => {
      cancelled = true
    }
  }, inputs)

  return result
}

开发者ID:blindern，项目名称:intern，代码行数:31，代码来源:api.ts

示例9: useFixtureStateRef

// Make latest fixture state accessible in ref callback
function useFixtureStateRef(fixtureState: FixtureState) {
  const ref = React.useRef(fixtureState);
  React.useEffect(() => {
    ref.current = fixtureState;
  });
  return ref;
}

开发者ID:skidding，项目名称:cosmos，代码行数:8，代码来源:useFixtureState.ts

示例10: useRedirect

export function useRedirect(history: History, redirectLocation?: Location) {
  useEffect(() => {
    if (redirectLocation) {
      history.replace(redirectLocation);
    }
  });
}

开发者ID:elastic，项目名称:kibana，代码行数:7，代码来源:useRedirect.ts

注：本文中的react.useEffect函数示例由纯净天空整理自Github/MSDocs等源码及文档管理平台，相关代码片段筛选自各路编程大神贡献的开源项目，源码版权归原作者所有，传播和使用请参考对应项目的License；未经允许，请勿转载。