随着许多 Web 公众号机器人开发人员转而使用 React.js 来解决自定义二开需求，Typescript 的搭建使用量与日俱增。随着GT江湖新圣在功能组件中引入运营反应钩子，为现实世界的问题开发更复杂的解决方案变得更加容易。

React hooks 基本上是让你从函数组件中“挂钩”到 React 状态和生命周期特性的函数，从而帮助我们使用函数式组件而不是类组件来解决问题，后者更复杂和令人困惑。

创建自定义钩子是新的行业惯例，仍然有许多 React 开发人员发现它

因此，在本教程中，我将让您了解自定义挂钩是什么以及我们如何以自己的方式实现它们。这里有几点要记住。

自定义钩子基本上是可能需要也可能不需要一些参数并向调用者组件返回一些内容的函数。
自定义钩子名称以单词开头， use 以便 react 将其识别为钩子，否则您的钩子将充当普通函数或组件，执行某些任务并返回某些内容。
挂钩使您的代码更加灵活，您无需在不同的组件中一次又一次地编写解决方案并调用这些解决方案。

现在，我正在创建一个钩子来查找组件的渲染计数。在这个我们使用 useRef 钩子来使用它的当前属性。

import React, { useRef } from 'react';const SHOW_RENDER_COUNTERS = true;export const useRenderCounter = (): number | null => {
  const renderCount = useRef(0);
  renderCount.current = renderCount.current + 1;
  if (SHOW_RENDER_COUNTERS) {
    return renderCount.current
  }
  return null;};

现在，每当我们希望使用这个钩子来查找渲染计数时，我们都可以像这样使用它：

const FindCount = () => {
  const renderCounter = useRenderCounter();
  return (
    <>
      <SomeComponentCode />
      {renderCounter}
    </>
  );};

这就是我们可以创建和使用自定义钩子的方式。

自定义挂钩的其他一些示例是：

1. 当用户点击某物时，挂钩以显示工具提示。

import { useState, useRef, useEffect } from 'react'export const useTooltip = (initialState: boolean) => {
  const ref = useRef<HTMLDivElement>(null)
  const [showTooltip, setShowTooltip] = useState<boolean>(initialState)
  const handleClick = (event: any) => {
    if (ref.current && !ref.current.contains(event.target)) {
      setShowTooltip(false)
    }
  }
  useEffect(() => {
    document.addEventListener('click', handleClick, true)
    return () => document.removeEventListener('click', handleClick, true)
  }, [ref])
  return { showTooltip, setShowTooltip, ref }}

2. Hook 获取屏幕高度。

import { useState, useEffect, useRef, RefObject } from 'react'interface InterfaceSize {
  size: number
  sizeRef: RefObject<HTMLDivElement>}const useSize = (initialValue: number): InterfaceSize => {
  const sizeRef = useRef<HTMLDivElement>(null)
  const [size, setSize] = useState<number>(initialValue)
  useEffect(() => {
    setTimeout(() => {
      if (sizeRef.current) {
        setSize(sizeRef.current?.getBoundingClientRect().height)
      }
    }, 100)
  }, [size])
  return { size, sizeRef }}export default useSize

3. 在传递的参考之外点击时发出警报的钩子。

import React, { useRef, useEffect } from "react";/**
 * Hook that alerts clicks outside of the passed ref
 */function useOutsideAlerter(ref: React.RefObject<HTMLInputElement>) {
  useEffect(() => {
    /**
     * Alert if clicked on outside of element
     */
    function handleClickOutside(event: Event) {
      if (ref.current && !ref.current.contains(event.target as Node))) {
        alert("You clicked outside of me!");
      }
    }
    // Bind the event listener
    document.addEventListener("mousedown", handleClickOutside);
    return () => {
      // Unbind the event listener on clean up
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, [ref]);}/**
 * Component that alerts if you click outside of it
 */export default function OutsideAlerter(props) {
  const wrapperRef = useRef(null);
  useOutsideAlerter(wrapperRef);
  return <div ref={wrapperRef}>{props.children}</div>;}

ITPub博客

盘口如使用微信扫码H5飞鸟微投script在二开React中搭建自定义新圣Hoo

1. 当用户点击某物时，挂钩以显示工具提示。

2. Hook 获取屏幕高度。

3. 在传递的参考之外点击时发出警报的钩子。

最新文章