了解React JS中的所有钩子

Hooks in React JS

什么时候使用Hooks？

如果你正在使用React JS进行一个web开发项目，在编码完一个组件函数后，你想添加一些状态。在这种情况下，你可以使用Hooks。

为了添加这些状态，早期你必须将其转换为一个类，然后你可以执行一个特定的功能，但现在，通过使用Hooks，你可以将其挂在现有的功能组件上。

钩子的规则

Hooks的功能和特点与 Javascript函数类似。然而，在使用它们之前，你需要牢记特定的规则，因为这些规则确保功能组件中所有的有状态逻辑在其源代码中是可见的。

规则1:只在顶层调用Hooks

你不应该在任何类、循环、条件或嵌套函数内调用Hooks。你应该总是在任何React程序的顶层使用Hooks。这条规则确保Hooks在每次组件函数渲染网络应用时以相同的方式被调用。

规则2:只从React函数中调用Hooks

你不能从任何其他函数如Javascript中调用Hook；你只需要从React组件函数中调用Hook。它也可以使用Javascript中的自定义Hooks函数来调用。

使用React Hooks的先决条件

你必须有一个6或以上的Node版本。
你必须有5.2及以上版本的NPM。
你必须有Create-react-app工具来运行React web应用程序。

React Hooks的安装

React Hook是一个简单明了的网络开发功能。

为了运行和执行Hook，你需要在你的本地机器上运行以下命令。

$ npm install react@16.8.0-alpha.1 --save

$ npm install react-dom@16.8.0-alpha.1 --save

上述程序将安装最新版本的React JS和React-DOM alpha，可以支持Hooks。你还需要确保package.json文件列出了React和React-DOM的依赖关系，如下面程序中给出的。

"react": "^16.8.0-alpha.1",  

           "react-dom": "^16.8.0-alpha.1",

钩子状态

钩子状态是一种新的状态，用于在React JS应用中声明一个状态。它的功能是使用useState()来设置和检索数据。

例子

Application.js

import React, { useState } from 'react';  

function CountApplication() {  

   // Declare a new state variable in React Hook, which we will call "totalcount"  

   const [totalcount, setCount] = useState(0);  

   return (  

      <div>  

      <p>You clicked {totalcount} times</p>  

      <button onClick={() => setCount(count + 1)}>  

          Click Here  

       </button>  

    </div>  

  );  

}  

export default CountApp;

在上面的例子中，useState被用作一个Hook，它在一个函数组件内被调用，为其添加一些本地状态和功能。useState Hook返回两个变量，当前/初始状态值和帮助我们更新当前值的函数。在React JS应用程序中声明了useState Hook后，我们现在将使用一些事件处理程序调用函数值。这个useState与this.setState几乎一样，执行的功能也类似。

效果钩子

Effect Hook主要负责在Hooks的一个函数组件中执行副作用。它有自己的架构，而且不使用类组件中可用的组件生命周期。换句话说，Effects Hooks类似于componentDidMount(), componentDidUpdate(), and componentWillUnmount() 生命周期方法。

这些副作用有一些标准的特性和功能，是大多数网络应用需要执行的。其中一些是。

更新和管理DOM。
从服务器API到React应用中获取和消耗数据。
为网络应用中的Hook设置一些订阅。

在React中，主要有两种类型的副作用:

没有清理的效果
有清理的效果

没有清理的效果。

没有清理的效果被广泛用于useEffect，它不会阻止浏览器更新和改变网页。在这种副作用的帮助下，网页变得更有反应能力，可以适应不同的设备屏幕。一些最常见的不需要清理的效果的例子是网络请求、日志、手动DOM突变等。

有清理的效果。

在React JS中，有一些效果需要在DOM更新后进行清理。例如，如果我们想为任何外部数据源设置一个订阅，我们应该优先清理内存，这样就不会发生内存泄漏。React会在Web应用中的一个组件卸载时执行这种内存清理。但效果在每次调用时都会运行，而不是只有一次。这就是React在我们渲染Web应用时也会清理内存的原因。

自定义Hooks

自定义Hook是Javascript函数的一种类型。这个函数以 "use "开头，它可以调用React JS网络应用中的任何其他Hook。它只是一个普通的Hook，但在开头有一个 "use"，这告诉我们这是一个Hook，并遵循Hook的所有规则。自定义Hook可以帮助你将不同的组件逻辑提取到程序中的可重复使用的功能中。

例子

下面是一个关于Hooks在React应用程序中如何工作的例子。

import React, { useState, useEffect } from 'react';  

const useDocTitle = title => {  

  useEffect(() => {  

    document.title = title;  

  }, [title])  

}  

function CustomCountingFunction() {  

 const [clickcount, setCount] = useState(0);  

 const increment = () => setCount(count + 1);  

 useDocTitle(`You clicked ${clickcount} times`);  

  // useEffect(() => {  

  //   document.title = `You clicked ${clickcount} times`  

  // });  

  return (  

    <div>  

      <p>You clicked {clickcount} times</p>  

      <button onClick={increment}>Click me</button>  

    </div>  

  )  

}  

export default CustomCountingFunction;

在上面的例子中，useDocTitle是一个自定义Hook，它的参数是一串文本，在这里是一个标题。在这个Hook里面，只要标题在react应用中被改变，我们就会调用useEffect Hook。第二遍是一个参数，它将检查并验证本地状态下的标题是否与我们传入的标题不同或相同。

结论

钩子是React JS中一个有用的函数，它允许你使用状态和其他功能，而不需要定义或调用任何类。在钩子的帮助下，你不需要调用或声明任何一个类。在这篇文章中，我们还讨论了Hooks的规则和各种功能。

关于React JS中所有hook函数的介绍