了解 React Hooks

对于使用函数式组件的 React 开发者来说，Hooks 现在是必不可少的。

我刚开始学习 Reactjs 时，对 Hooks 的概念感到很困惑，而且找不到一个能很好地解释它的教程。

现在我对钩子有了更深的理解，所以我决定根据我的理解写一篇文章来解释钩子，希望能帮助到其他人。

咱们马上进去吧。

什么是钩子？我为什么要关注它？

因此，在 React 的早​​期阶段，如果开发者需要一个之后会发生变化的状态，他们就必须使用类组件。但是，在 JavaScript 中使用类组件可能会给开发者带来诸多困扰。所以，为了像我这样仍在努力理解 JavaScript 类组件的程序员能够继续使用 React，React 团队在发布 React 16.8.0 版本时引入了 Hooks。

那么，什么是 Hooks 呢？
嗯，根据 Reactjs 团队的说法。

它们允许你无需编写类即可使用状态和其他 React 功能。

Hooks 让你无需使用类就能使用 React 的一些强大功能。

使用钩子的规则

我们都讨厌规则，对吧？但如果没有规则，很多事情都会出错。在使用 React Hooks 时，你需要遵守一些规则。我在下面列出了一些：

• 你只能在函数式组件中使用钩子，而不能在类或普通的 JavaScript 函数中使用。

• 你不能在条件语句、循环或嵌套函数中使用 React Hooks。

• 创建自定义钩子时，务必在其名称前加上“use”前缀。例如，如果我有一个用于检查窗口大小的钩子，它应该被命名为 `<window_size_t>` useWindowSize。我们将在创建自定义钩子时详细讲解这一点。

要了解更多关于鱼钩规则的信息，您可以阅读鱼钩规则页面。

让我们开始使用钩子函数吧。

在本文的剩余部分，我们将探讨 React 中的不同 hook 以及如何创建我们自己的 hook。

使用状态

React 状态是 Hooks 创建的主要原因之一。React 状态允许组件在内部声明和管理数据。useState 会在状态值改变时使组件重新渲染。让我们来看一个例子。

import React, { useState } from 'react';


const CompName = () => {
 const [userName] = useState('Elizabeth');
 return (
   <div>
     Hello World! my name is {userName}
   </div>
 )
}

上面的代码中使用了状态钩子。如你所见，我向钩子传递了值“Elizabeth”。你还会注意到，该钩子返回一个数组。数组的第一个元素返回传递给钩子的值（你可以随意命名）。在本例中，该值是“Elizabeth”。数组的第二个元素返回一个函数，该函数允许我们修改状态。

让我们修改上面的示例，使其显示传递给表单的任何内容。

展现你的魔力

import React, { useState } from 'react';


const ShowHide = () => {
  const [show, setShow] = useState(false);
  return (
    <div>
     <button onClick={() => setShow(!show)}>{show ? 'Show me 
      some magic' : 'Hide the magic'}</button>
       {show && (<p>Some magic</p>)}
     </div>
   )
 }

上面的代码中，我们使用状态来显示和隐藏一些神奇的东西😁 以下是代码的输出。

使用数组和对象

状态钩子也可以接受数组和对象。但是，设置对象状态与设置字符串状态截然不同。假设你有一个包含不同属性的对象，并且你想更新该对象中某个属性的值，那么下面的示例并不是更新状态的正确方法。

  const [person, setPerson] = useState({name: 'Tolulope', age: '34'});
  setPerson({name: 'Tofa'});

console.log(person);
// expected result: name: 'Tofa'

如果您点击上方的“更新姓名”按钮，您会发现年龄信息消失了。这是因为传递给 `setPerson` 的新对象会覆盖对象中原有的信息。

`setState` 方法接受一个包含先前状态的参数。因此，要使用我们之前的代码设置对象状态，您需要展开先前的状态，然后传递要更新的属性，如下例所示。

setState((prevState) => 
 {
  ...prevState,
  name: 'Tofa'
 })

上面的示例首先会复制先前状态的内容，然后将 name 属性更新为“Tofa”。

使用状态和函数

useState也接受函数，例如，如果您需要进行一些复杂的计算来设置状态，您可能希望它只在您向 useState 传递一个函数时运行一次。

将函数传递给 useState 只会让该函数运行一次，即在组件挂载时运行一次。

结论

利用状态可以做更多的事情，所以我建议你尝试探索各种可能性。

我的下一篇文章将解释 useEffect 钩子。

如果您喜欢这篇文章，请点赞并分享。

如有任何疑问，请随时在评论区留言。

趁这段时间，继续编程，创造佳作吧！