如何定义JavaScript Hooks

在向您解释JavaScript中Hooks的用法之前，让我们稍微了解一下Hooks的概念。Hooks不过是函数，您可以用它来将可重用组件与功能性组件分离。

通过Hooks，可以从函数组件代码中“挂接”到React状态和生命周期属性。使用Hooks可以在没有类的情况下使用React。

前提条件：

Node版本6或更高
NPM版本必须为5.2或更高
运行React App所需的Create-react-app工具

在JavaScript中定义Hooks：

在React 16.8版本之前，开发者只能通过使用类组件来解决状态和其他React功能。然而，在16.8版本中，React引入了新的模式 Hooks 。React Hooks用于将有状态逻辑和副作用与函数组件分离开来。JavaScript函数（称为hooks）控制状态的行为以及它对组件产生的影响，将其与组件分离开来。

现在，有状态逻辑已经被隔离，我们可以在组件中使用它。您可能想知道什么是有状态逻辑。无论需定义和处理一个本地状态变量的内容都可以称为有状态逻辑。

例如，它使您可以访问状态和许多其他React功能，而无需创建类。

创建Hook的方法或规则：

建议只在最高级别使用Hook。不需要在循环、条件或嵌套函数中调用Hook。
使用React函数组件来调用Hook。
无法使用常规的JavaScript函数来调用Hook。

React提供了许多内置的Hooks：

useState: useState是一种特殊的函数，用于接收起始状态作为参数，并以数组的形式输出两个元素。可以在多个状态中使用useState调用。
useEffect: 使用Effect Hook可以在函数组件中执行副作用操作。计时器、数据获取和直接DOM更新是副作用的一些示例。useEffect接受两个参数。
useArray: 通过给我们提供一系列的数组操作技巧，减轻了我们的工作量。这个Hook是react-hanger包的一部分。
useReducer: useState Hook和reducer Hook是类似的。可以使用自定义的状态逻辑。在useReducer中，可以使用dispatch方法，并返回当前状态。
useMedia: React传感器Hook useMedia监视CSS media查询的状态。媒体查询的重要性对于任何网站来说显而易见，不需要隐藏。

示例1： 这是另一个用于演示Hooks的例子：

import React, { useState } from 'react';

function App() {
    const click = useState('GeeksForGeeks');
    return (
        <h1>Welcome to {click}</h1>
    );
}

export default App;

输出：

Welcome to GeeksForGeeks

解释： UseState()返回一个由两个值组成的数组。状态变量的初始值由第一个值表示，可以用来更新变量的函数的引用由第二个值表示。数组解构可以同时分配两个值，以便在组件中使用。当然，它们也可以通过将变量分配给useState()来独立分配，然后将第一个索引分配给一个变量，将第二个索引分配给另一个变量（解构只是使这更容易）。

例子2： 另一个说明Hooks的例子：

import React, { useState } from 'react';

function App() {
    const [click, setClick] = useState(0);

    // Using array destructuring here to
    // assign initial value 0 to click
    // and a reference to the function
    // that updates click to setClick
    return (
        <div>
            <p>You clicked {click} times</p>
            <button onClick={() => setClick(click + 1)}>
                Click me
            </button>
        </div>
    );
}

export default App;

输出：

如何定义JavaScript Hooks

解释： useState()的操作可能一开始看起来很奇怪。毕竟，每次渲染的函数都是新的，那么“状态”如何持久存在呢？在幕后，有一个代表函数组件并具有自己堆栈的内存对象。当调用useState()钩子时，状态变量的值会被修改，并且新变量会被存储在堆栈上的新单元中。堆栈指针同时递增以指向最后一个单元。在每次渲染之后，使用此堆栈指针指向的值。当用户执行有意刷新时，堆栈被清除，并且在组件被渲染时进行新的内存分配。

阅读更多：JavaScript 教程