本位翻译自 https://reactjs.org/docs/hooks-intro.html  并加入一些自己的观点。

Hooks规则

Hooks是JavaScript函数,但在使用它们时需要遵循两个规则。 我们提供了一个linter plugin来自动执行这些规则:

只能在顶层调用hooks

1.不要在循环,条件或嵌套函数中调用Hook。并且总是在React函数的顶层使用Hooks。 通过遵循此规则,您可以确保每次组件呈现时都以相同的顺序调用Hook。这就是允许React在多个useState和useEffect调用之间正确保留Hook状态的原因。

只从React Functions调用Hooks

不要从常规JavaScript函数中调用Hook。

  • 从React函数组件调用Hooks。
  • 从自定义Hooks调用Hooks

ESLint Plugin

npm install eslint-plugin-react-hooks@next
// Your ESLint configuration
{
  "plugins": [
    // ...
    "react-hooks"
  ],
  "rules": {
    // ...
    "react-hooks/rules-of-hooks": "error"
  }
}

将来,此插件将默认包含在Create React App和类似的工具包中。

说明

如前所述,我们可以在单个组件中使用多个State或Effect Hook:

function Form() {
  // 1. Use the name state variable
  const [name, setName] = useState('Mary');

  // 2. Use an effect for persisting the form
  useEffect(function persistForm() {
    localStorage.setItem('formData', name);
  });

  // 3. Use the surname state variable
  const [surname, setSurname] = useState('Poppins');

  // 4. Use an effect for updating the title
  useEffect(function updateTitle() {
    document.title = name + ' ' + surname;
  });

  // ...
}

那么React如何知道哪个状态对应于哪个useState调用? 答案是React依赖于调用Hooks的顺序。 我们的示例有效,因为Hook调用的顺序在每个渲染上都是相同的:

// ------------
// First render
// ------------
useState('Mary')           // 1. Initialize the name state variable with 'Mary'
useEffect(persistForm)     // 2. Add an effect for persisting the form
useState('Poppins')        // 3. Initialize the surname state variable with 'Poppins'
useEffect(updateTitle)     // 4. Add an effect for updating the title

// -------------
// Second render
// -------------
useState('Mary')           // 1. Read the name state variable (argument is ignored)
useEffect(persistForm)     // 2. Replace the effect for persisting the form
useState('Poppins')        // 3. Read the surname state variable (argument is ignored)
useEffect(updateTitle)     // 4. Replace the effect for updating the title

// ...

只要Hook调用的顺序在渲染之间是相同的,React就可以将一些本地状态与它们中的每一个相关联。 但是如果我们在条件中放置Hook调用(例如,persistForm效果)会发生什么?

  // 🔴 We're breaking the first rule by using a Hook in a condition
  if (name !== '') {
    useEffect(function persistForm() {
      localStorage.setItem('formData', name);
    });
  }

名称!==''条件在第一次渲染时为true,因此我们运行此Hook。 但是,在下一次渲染时,用户可能会清除表单,使条件为false。 现在我们在渲染过程中跳过此Hook,Hook调用的顺序变得不同:

useState('Mary')           // 1. Read the name state variable (argument is ignored)
// useEffect(persistForm)  // 🔴 This Hook was skipped!
useState('Poppins')        // 🔴 2 (but was 3). Fail to read the surname state variable
useEffect(updateTitle)     // 🔴 3 (but was 4). Fail to replace the effect

React不知道第二次useState Hook调用返回什么。 React期望此组件中的第二个Hook调用对应于persistForm效果,就像在前一个渲染中一样,但它不再存在。 从那时起,在我们跳过的那个之后的每个下一个Hook调用也会移动一个,导致错误。

这就是必须在我们组件的顶层调用Hooks的原因。 如果我们想要有条件地运行一个效果,我们可以把这个条件放在我们的Hook中:

  useEffect(function persistForm() {
    // 👍 We're not breaking the first rule anymore
    if (name !== '') {
      localStorage.setItem('formData', name);
    }
  });

请注意,如果使用提供的lint规则,则无需担心此问题。 但是现在你也知道为什么Hooks以这种方式工作,以及规则阻止了哪些问题。

创建自己的hooks

构建自己的Hook可以将组件逻辑提取到可重用的函数中。

import { useState, useEffect } from 'react';

function FriendStatus(props) {
  const [isOnline, setIsOnline] = useState(null);

  function handleStatusChange(status) {
    setIsOnline(status.isOnline);
  }

  useEffect(() => {
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });

  if (isOnline === null) {
    return 'Loading...';
  }
  return isOnline ? 'Online' : 'Offline';
}

现在让我们说我们的聊天应用程序也有一个联系人列表,我们想要呈现绿色的在线用户名。 我们可以将上面类似的逻辑复制并粘贴到我们的FriendListItem组件中,但它不是理想的:

import { useState, useEffect } from 'react';

function FriendListItem(props) {
  const [isOnline, setIsOnline] = useState(null);

  function handleStatusChange(status) {
    setIsOnline(status.isOnline);
  }

  useEffect(() => {
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });

  return (
    <li style={{ color: isOnline ? 'green' : 'black' }}>
      {props.friend.name}
    </li>
  );
}

相反,我们想在FriendStatus和FriendListItem之间分享这个逻辑。

传统上,在React中,我们有两种流行的方式来共享组件之间的状态逻辑: render props and higher-order components.我们现在将看看Hook如何在不强迫您向树中添加更多组件的情况下解决许多相同的问题。

提取自定义挂钩

当我们想要在两个JavaScript函数之间共享逻辑时,我们将它提取到第三个函数。 组件和hooks都是functions,所以这也适用于它们!

自定义Hook是一个JavaScript函数,其名称以“use”开头,可以调用其他Hook。 例如,下面的useFriendStatus是我们的第一个自定义Hook:

import { useState, useEffect } from 'react';

function useFriendStatus(friendID) {
  const [isOnline, setIsOnline] = useState(null);

  function handleStatusChange(status) {
    setIsOnline(status.isOnline);
  }

  useEffect(() => {
    ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);
    };
  });

  return isOnline;
}

里面没有任何新内容 - 逻辑是从上面的组件中复制的。 就像在组件中一样,确保只在自定义Hook的顶层无条件地调用其他Hook。

与React组件不同,自定义Hook不需要具有特定签名。 我们可以决定它作为参数需要什么,以及它应该返回什么(如果有的话)。 换句话说,它就像一个普通的功能。 它的名字应该始终使用,这样你就可以一眼就看出钩子的规则适用于它。

我们使用FriendStatus Hook的目的是订阅我们朋友的状态。 这就是为什么它将friendID作为参数,并返回此朋友是否在线:

function useFriendStatus(friendID) {
  const [isOnline, setIsOnline] = useState(null);

  // ...

  return isOnline;
}

现在让我们看看我们如何使用我们的自定义Hook。

使用自定义挂钩

最初,我们的目标是从FriendStatus和FriendListItem组件中删除重复的逻辑。 他们俩都想知道朋友是否在线。

现在我们已经将这个逻辑提取到useFriendStatus hook,我们可以使用它:

function FriendStatus(props) {
  const isOnline = useFriendStatus(props.friend.id);

  if (isOnline === null) {
    return 'Loading...';
  }
  return isOnline ? 'Online' : 'Offline';
}
function FriendListItem(props) {
  const isOnline = useFriendStatus(props.friend.id);

  return (
    <li style={{ color: isOnline ? 'green' : 'black' }}>
      {props.friend.name}
    </li>
  );
}

这段代码是否等同于原始示例? 是的,它以完全相同的方式工作。 如果你仔细观察,你会注意到我们没有对行为做任何改变。 我们所做的只是将两个函数之间的一些公共代码提取到一个单独的函数中。 自定义hooks 是一种自然遵循Hooks设计的约定,而不是React function。

我是否必须以“use”开头命名我的自定义Hook? 是的。 这个惯例非常重要。 没有它,我们将无法自动检查是否违反了Hook规则,因为我们无法判断某个函数是否包含对其中的Hooks的调用。

使用相同的Hook共享状态做两个组件吗?  自定义hooks是一种重用有状态逻辑的机制(例如设置订阅和记住当前值),但每次使用 自定义hooks时,其中的所有状态和效果都是完全隔离的。

自定义Hook如何获得隔离状态? 每次对Hook的调用都会被隔离。 因为我们直接调用useFriendStatus,从React的角度来看,我们的组件只调用useState和useEffect。 正如我们之前所知,我们可以在一个组件中多次调用useState和useEffect,它们将完全独立。

提示:在hooks之间传递信息

const friendList = [
  { id: 1, name: 'Phoebe' },
  { id: 2, name: 'Rachel' },
  { id: 3, name: 'Ross' },
];

function ChatRecipientPicker() {
  const [recipientID, setRecipientID] = useState(1);
  const isRecipientOnline = useFriendStatus(recipientID);

  return (
    <>
      <Circle color={isRecipientOnline ? 'green' : 'red'} />
      <select
        value={recipientID}
        onChange={e => setRecipientID(Number(e.target.value))}
      >
        {friendList.map(friend => (
          <option key={friend.id} value={friend.id}>
            {friend.name}
          </option>
        ))}
      </select>
    </>
  );
}

我们将当前选择的朋友ID保留在recipientID状态变量中,如果用户在选择器中选择其他朋友,则更新它。 因为useState Hook调用为我们提供了recipientID状态变量的最新值,所以我们可以将它作为参数传递给我们的自定义useFriendStatus Hook: const [recipientID, setRecipientID] = useState(1); const isRecipientOnline = useFriendStatus(recipientID);  这让我们知道当前选择的朋友是否在线。 如果我们选择其他朋友并更新recipientID状态变量,我们的useFriendStatus Hook将取消订阅之前选择的朋友,并订阅新选择的朋友的状态。