在现代 React 开发中，自定义 Hooks（Custom Hooks） 是提升代码复用性、可维护性和可读性的核心工具。它们允许开发者将组件逻辑提取为可复用的函数，，彻底告别“渲染属性”（Render Props）和高阶组件（HOC）的繁琐模式。

如果你在 React 项目里写了一个 useEffect，本来希望它只运行一次，却在控制台看到它执行了两次。不用担心，很多人都遇到过这个问题。实际上，这不是 bug，而是 React 故意这样设计的。

Vue 3 推出后，Hooks 库让开发变得更简单。这里介绍四个好用的库，每个都有特色。需要各种工具函数：选 VueUse；专注数据请求功能：选 Vue Hooks Plus；从 React 转 Vue 开发：选 ahooks-vue；追求小巧轻量：选 V3Hooks

在React开发中，随着业务复杂度提升，仅依靠内置Hooks往往难以满足需求。本文将系统性地介绍如何设计和封装高质量的自定义Hooks，帮助你提升代码复用性和开发效率。

自定义 hooks 是基于 React Hooks 的一个拓展，我们可以根据业务需求制定满足业务需要的组合 hooks，更注重的是逻辑单元。怎样把一段逻辑封装起来，做到复用

为什么使用Hooks副作用问题：诸如数据获取、订阅、定时执行任务、手动修改ReactDOM这些行为都可以称为副作用；而Hooks的出现可以使用useEffect来处理这些副作用

最初，在 React 中可以使用 createClass 来创建组件，后来被类组件所取代。在 React 16.8 版本中，新增的 Hooks 功能彻底改变了我们编写 React 程序的方式，使用 Hooks 可以编写更简洁、更清晰的代码

而函数组件函数组件没有this，没有生命周期，没有状态state，函数的执行开销比创建类实例的开销要小。因此，为了提高性能，尽量使用函数组件。然而函数组件有个最大的问题就是没有状态state，所以react官方出了个hooks来解决这个问题。

React Hooks 将调度权限全权交于用户，因此，分享一下个人在处理 Hooks 调度时的经验，希望对大家有所帮组，先前情提要一下，state 是时间上的数组，且细化到了具体的每一个 state，你可以自由地组织自己的调度结构

过去，React 中的函数组件都被称为无状态函数式组件(stateless functional component)，这是因为函数组件没有办法拥有自己的状态，只能根据 Props 来渲染 UI ，其性质就相当于是类组件中的 render 函数，虽然结构简单明了，但是作用有限

创建store;注入store，这样既可以在class中使用，也可以在hooks中使用了;在class中使用;在hooks中使用

由于篇幅所限文章中并没有给出demo的所有代码，大家如果有兴趣可以将代码clone到本地从commit来看整个demo的TDD过程，配合文章来看会比较清晰，从进公司前认识了TDD，到实践TDD

以下是我们将要构建的搜索框的动图。这是一个简单的搜索框，我们可以用它来搜索联系人列表。我们将使用函数式组件，而不是基于类的组件来实现它。

9月份开始，使用了React16.8的新特性React Hooks对项目进行了重构，果然，感觉没有被辜负，就像阮一峰老师所说的一样，这个 API 是 React 的未来。

Hooks出来已经有段时间了，相信大家都用过段时间了，有没有小伙伴们遇到坑呢，我这边就有个 setInterval 的坑，和小伙伴们分享下解决方案。写个 count 每秒自增的定时器，如下写法结果，界面上 count 为 1 ？