https://amatsuzero.github.io/LastStand/tags/react-hooks/Recent content in React Hooks on Last StandHugozh-cnSat, 08 Feb 2025 00:00:00 +0800https://amatsuzero.github.io/LastStand/posts/frontend/react/react-hooks/Tue, 17 Dec 2024 00:00:00 +0800https://amatsuzero.github.io/LastStand/posts/frontend/react/react-hooks/<h2 id="一-前言">一 前言</h2> <p>React hooks是react16.8 以后，react新增的钩子API，目的是增加代码的可复用性，逻辑性，弥补无状态组件没有生命周期，没有数据管理状态state的缺陷。</p> <p>本章节将介绍目前 React 提供的所有 hooks ，介绍其功能类型和基本使用方法。</p> <h3 id="11-技术背景">1.1 技术背景</h3> <p><strong>react hooks 解决了什么问题？</strong></p> <p>先设想一下，如果没有 Hooks，函数组件能够做的只是接受 Props、渲染 UI ，以及触发父组件传过来的事件。所有的处理逻辑都要在类组件中写，这样会使 class 类组件内部错综复杂，每一个类组件都有一套独特的状态，相互之间不能复用，即便是 React 之前出现过 mixin 等复用方式，但是伴随出 mixin 模式下隐式依赖，代码冲突覆盖等问题，也不能成为 React 的中流砥柱的逻辑复用方案。所以 React 放弃 mixin 这种方式。</p> <p>类组件是一种面向对象思想的体现，类组件之间的状态会随着功能增强而变得越来越臃肿，代码维护成本也比较高，而且不利于后期 tree shaking。所以有必要做出一套函数组件代替类组件的方案，于是 Hooks 也就理所当然的诞生了。</p> <p>所以 Hooks 出现本质上原因是：</p> <ul> <li><strong>让函数组件也能做类组件的事，有自己的状态，可以处理一些副作用，能获取 ref ，也能做数据缓存。</strong></li> <li><strong>解决逻辑复用难的问题。</strong></li> <li><strong>放弃面向对象编程，拥抱函数式编程。</strong></li> </ul> <p><strong>为什么要使用自定义 Hooks ？</strong></p> <p>自定义 hooks 是在 React Hooks 基础上的一个拓展，可以根据业务需求制定满足业务需要的组合 hooks ，更注重的是逻辑单元。通过业务场景不同，到底需要React Hooks 做什么，怎么样把一段逻辑封装起来，做到复用，这是自定义 hooks 产生的初衷。</p> <p>自定义 hooks 也可以说是 React Hooks 聚合产物，其内部有一个或者多个 React Hooks 组成，用于解决一些复杂逻辑。</p>