一文带你深入了解React Hooks！

React中你了解Hooks吗？本篇文章带大家来深入了解下React Hooks，希望对大家有所帮助！

前言

Hooks 用于在不编写 class 的情况下，使用 state 以及其他 React 特性。那么 Hooks 究竟是什么，为什么要使用 Hooks，React 提供了哪些常用 Hooks，以及如何自定义 Hooks 呢，下文将为您一一揭晓。【相关推荐：Redis视频教程】

什么是 Hooks

Hooks 译为钩子，Hooks 就是在函数组件内，负责钩进外部功能的函数。

React 提供了一些常用钩子，React 也支持自定义钩子，这些钩子都是用于为函数引入外部功能。

当我们在组件中，需要引入外部功能时，就可以使用 React 提供的钩子，或者自定义钩子。

比如在组件内引入可管理 state 的功能，就可以使用 useState 函数，下文会详细介绍 useState 的用法。

为什么要用 Hooks

使用 Hooks 有 2 大原因：

• 简化逻辑复用；
• 让复杂组件更易理解。

1. 简化逻辑复用

在 Hooks 出现之前，React 必须借用高阶组件、render props 等复杂的设计模式才能实现逻辑的复用，但是高阶组件会产生冗余的组件节点，让调试更加复杂。

Hooks 让我们可以在无需修改组件结构的情况下复用状态逻辑，下文会详细介绍自定义 Hooks 的用法。

2. 让复杂组件更易理解

在 class 组件中，同一个业务逻辑的代码分散在组件的不同生命周期函数中，而 Hooks 能够让针对同一个业务逻辑的代码聚合在一块，让业务逻辑清晰地隔离开，让代码更加容易理解和维护。

四、常用的 Hooks

1. useState

useState 是允许你在 React 函数组件中添加 state 的 Hook。

使用示例如下：

import React, { useState } from 'react';

function Example() {
  // 声明一个叫 "count" 的 state 变量
  const [count, setCount] = useState(0);
  // ...