你应该了解的 React Hooks🔥🔥🔥

awesome-react-hooks

React Hooks算是 React 的一个新特性。它允许你无需使用类即可使用 React 的功能。不过，我不会在这篇文章中详细介绍它，因为市面上已经有很多很棒的介绍文章了。这篇文章将向你展示一些实用的 Hooks 以及它们可以实现的功能。

`react-use-form-state`钩

表单是获取用户信息的一种常见模式。无论表单大小，它们都有各自的状态需要我们管理，无论是用于验证，还是根据之前的选择填充新的输入框。

这个钩子是一个方便的工具，它允许您使用本机 HTML 输入字段简化表单状态的管理。

您可以使用以下方式安装它：

npm i react-use-form-state

简单用法：

import { useFormState } from 'react-use-form-state';

export default function SignUpForm({ onSubmit }) {
  const [formState, { text, email, password, radio }] = useFormState();

  function handleSubmit(e) {
    // ...
  }

  return (
    <form onSubmit={handleSubmit}>
      <input {...text('name')} />
      <input {...email('email')} required />
      <input {...password('password')} required minLength="8" />
      <input {...radio('plan', 'free')} />
      <input {...radio('plan', 'premium')} />
    </form>
  );
}

这样你就会得到json如下结构：

{
  values: {
    name: 'Mary Poppins',
    email: 'mary@example.com',
    password: '1234',
    plan: 'free',
  },
  touched: {
    name: true,
    email: true,
    password: true,
    plan: true,
  },
  validity: {
    name: true,
    email: true,
    password: false,
    plan: true,
  },
  errors: {
    password: 'Please lengthen this text to 8 characters or more',
  },
  clear: Function,
  clearField: Function,
  reset: Function,
  resetField: Function,
  setField: Function,
}

它还允许你通过对象进行初始化initialState，提供各种表单事件处理程序、高级输入选项、自定义输入验证、自定义控件等等。更多信息，请务必查看其GitHub Repo 。

wsmd / react-use-form-state

📄 用于管理表单和输入状态的 React hook

`use-media`

如果你想要提供响应式的用户体验，这个小钩子非常方便。它可以跟踪 CSS 媒体查询的状态，并允许你根据状态采取行动。

和useEffect：

import useMedia from 'use-media';
// Alternatively, you can import as:
// import {useMedia} from 'use-media';

const Demo = () => {
  // Accepts an object of features to test
  const isWide = useMedia({minWidth: 1000});
  // Or a regular media query string
  const reduceMotion = useMedia('(prefers-reduced-motion: reduce)');

  return (
    <div>
      Screen is wide: {isWide ? '😃' : '😢'}
    </div>
  );
};

和useLayoutEffect：

import {useMediaLayout} from 'use-media';

const Demo = () => {
  // Accepts an object of features to test
  const isWide = useMediaLayout({minWidth: 1000});
  // Or a regular media query string
  const reduceMotion = useMediaLayout('(prefers-reduced-motion: reduce)');

  return (
    <div>
      Screen is wide: {isWide ? '😃' : '😢'}
    </div>
  );
};

有关这个漂亮的小钩子的更多信息，请访问此 GitHub repo。

streamich /使用媒体

useMedia React hook 来跟踪 CSS 媒体查询状态

`react-firebase-hooks`

Firebase 有多棒，不用我多说，但如果能用一组 hooks 轻松集成，会怎么样？它有 4 组 hooks 供你使用：

用法：

import { useAuthState } from 'react-firebase-hooks/auth';

const CurrentUser = () => {
  const [user, initialising, error] = useAuthState(firebase.auth());
  const login = () => {
    firebase.auth().signInWithEmailAndPassword('test@test.com', 'password');
  };
  const logout = () => {
    firebase.auth().signOut();
  };

  if (initialising) {
    return (
      <div>
        <p>Initialising User...</p>
      </div>
    );
  }
  if (error) {
    return (
      <div>
        <p>Error: {error}</p>
      </div>
    );
  }
  if (user) {
    return (
      <div>
        <p>Current User: {user.email}</p>
        <button onClick={logout}>Log out</button>
      </div>
    );
  }
  return <button onClick={login}>Log in</button>;
};

你当然不会硬编码你的用户名和密码吧？😁

点击此处了解更多信息。

CSFrequency / react-firebase-hooks

Firebase 的 React Hooks。

`use-onClickOutside`钩

我经常需要注意用户何时点击了元素之外的内容。这可能是为了更改某些内容或执行某个操作。这个小钩子可以让你做到这一点：

import * as React from 'react'
import useOnClickOutside from 'use-onclickoutside'

export default function Modal({ close }) {
  const ref = React.useRef(null)
  useOnClickOutside(ref, close)

  return <div ref={ref}>{'Modal content'}</div>
}

如你所见，你可以为某个元素提供一个 ref 并将其传递给钩子。如果在该元素外部的任何地方发生点击，则本例中的回调函数close会被调用。

在此 GitHub 存储库中了解有关此钩子的更多信息。

安达利斯特/ use-onclickoutside

用于监听元素外部点击的反应钩子。

`useIntersectionObserver`钩

您可能还记得我写过一篇关于图像优化的文章，以及 API 如何IntersectionObserver成为一个方便的工具，用于在图像出现在视口时延迟加载图像。

这个钩子允许你使用这个很棒的 API：

import React, { useRef, useState } from "react";
import { useIntersectionObserver } from "react-hook-intersection-observer";

const App = () => {
  const root = useRef();    // We need a ref to our "root" or our parent,
  const target = useRef();  // We need a ref to our "target" or our child-to-watch,

  // Let's use a bit of state.
  const [isThingIntersecting, setThingIntersecting] = useState(false);

  // Here's our hook! Let's give it some configuration...
  useIntersectionObserver({
    root,
    target,

    // What do we do when it intersects?
    // The signature of this callback is (collectionOfIntersections, observerElement).
    onIntersect: ([{ isIntersecting }]) => setThingIntersecting(isIntersecting)
  });

  return (
    <div className="App">
      <h1>useIntersectionObserver</h1>
      <h2>
        The thing is currently{" "}

        {!isThingIntersecting && <span style={{ color: "red" }}>not</span>}{" "}

        <span style={{ color: isThingIntersecting ? "green" : "black" }}>
          intersecting
        </span>

        !
      </h2>


      <div ref={root} className="black-box">
        <div className="larger-box">
          <div ref={target}>THE THING</div>
        </div>
      </div>
    </div>
  );
};

要了解更多信息，请查看此 GitHub repo。

TejasQ / react-hook-intersection-observer

一个可与 Intersection Observer API 配合使用的简单 React hook。

`react-use`收藏

这是一些很棒的钩子的集合，您可以在传感器、UI、动画、副作用、生命周期和状态等类别中使用它们。

一个例子是useLocation它使您能够访问浏览器的位置。

import {useLocation} from 'react-use';

const Demo = () => {
  const state = useLocation();

  return (
    <pre>
      {JSON.stringify(state, null, 2)}
    </pre>
  );
};

如果您正在使用 Internet Explorer（但为什么😂），您可以使用这个 polyfill。

或者您可以使用它useBattery来跟踪移动设备上的电池状态：

import {useBattery} from 'react-use';

const Demo = () => {
  const batteryState = useBattery();

  if (!batteryState.isSupported) {
    return (
      <div>
        <strong>Battery sensor</strong>: <span>not supported</span>
      </div>
    );
  }

  if (!batteryState.fetched) {
    return (
      <div>
        <strong>Battery sensor</strong>: <span>supported</span> <br />
        <strong>Battery state</strong>: <span>fetching</span>
      </div>
    );
  }

  return (
    <div>
      <strong>Battery sensor</strong>:&nbsp;&nbsp; <span>supported</span> <br />
      <strong>Battery state</strong>: <span>fetched</span> <br />
      <strong>Charge level</strong>:&nbsp;&nbsp; <span>{ (batteryState.level * 100).toFixed(0) }%</span> <br />
      <strong>Charging</strong>:&nbsp;&nbsp; <span>{ batteryState.charging ? 'yes' : 'no' }</span> <br />
      <strong>Charging time</strong>:&nbsp;&nbsp;
      <span>{ batteryState.chargingTime ? batteryState.chargingTime : 'finished' }</span> <br />
      <strong>Discharging time</strong>:&nbsp;&nbsp; <span>{ batteryState.dischargingTime }</span>
    </div>
  );
};

要了解所有这些内容，请查看此 GitHub repo。

streamich / react-use

React Hooks — 👍

React Redux 钩子

React Redux 现在提供了一组 hook API，作为现有connect()高阶组件的替代方案。这些 API 允许你订阅 Redux store 并调度操作，而无需将组件包装在其中connect()。

这里是useSelector使用选择器函数返回全部存储的一部分的钩子。

import React from 'react'
import { useSelector } from 'react-redux'

export const CounterComponent = () => {
  const counter = useSelector(state => state.counter)
  return <div>{counter}</div>
}

查看其综合文档以了解更多信息。

反应吊架

一组有用的钩子，专注于原始类型状态的变化。它们有两个版本，但建议使用 V2。

安装：

yarn add react-hanger

用法：

import React, { Component } from "react";

import {
  useInput,
  useBoolean,
  useNumber,
  useArray,
  useOnMount,
  useOnUnmount
} from "react-hanger";

const App = () => {
  const newTodo = useInput("");
  const showCounter = useBoolean(true);
  const limitedNumber = useNumber(3, { lowerLimit: 0, upperLimit: 5 });
  const counter = useNumber(0);
  const todos = useArray(["hi there", "sup", "world"]);

  const rotatingNumber = useNumber(0, {
    lowerLimit: 0,
    upperLimit: 4,
    loop: true
  });

  return (
    <div>
      <button onClick={showCounter.toggle}> toggle counter </button>
      <button onClick={() => counter.increase()}> increase </button>
      {showCounter.value && <span> {counter.value} </span>}
      <button onClick={() => counter.decrease()}> decrease </button>
      <button onClick={todos.clear}> clear todos </button>
      <input type="text" value={newTodo.value} onChange={newTodo.onChange} />
    </div>
  );
};