一个很有意思的hook库：react

1、一个很有意思的hook库：react前言 千呼万唤始出来，react hooks最终在react 16.8版本中发布稳定版了。最近逛github发觉了一个很故意思的库：react-hanger。 复习react hooks 假如对hooks还不怎么了解的学生，建议去看一下官方文档：introducing hooks. 什么是 hooks? 我们都知道，在hooks之前，开发react组件主要是class组件和function组件。function组件没有state，所以也叫sfc（stateless functional component），容易的将props映射成view；class组件有

2、state，能够处理越发复杂的规律。但是基于class的组建并不是完善的，总结起来就像dan说的那样，有三个主要的问题： 代码重用：在hooks出来之前，频繁的代码重用方式是hocs和render props，这两种方式带来的问题是：你需要解构自己的组件，十分的粗笨，同时会带来很深的组件嵌套 复杂的组件规律：在class组件中，有许多的lifecycle 函数，你需要在各个函数的里面去做对应的事情。这种方式带来的痛点是：规律簇拥在各处，开发者去维护这些代码会簇拥自己的精力，理解代码规律也很吃力 class组件的困窘：对于初学者来说，需要理解class组件里面的this是比较吃力的(这个理由有点

3、牵强——)，同时，基于class的组件难以优化(举个不恰当的例子，看一下babel转移出来的class代码量增长了多少) 为了解决上面的这三个问题，react hooks提案登场了，它有以下几个特点： 无痛接入，不破坏现有的项目结构 彻低向后兼容，不包含任何不兼容breaking changes 现在就能用法 hooks 允许你在不编写 class 的状况下用法状态(state)和其他 react 特性。 你还可以构建自己的 hooks, 跨组件分享可重用的有状态规律。 现在react中内置的hooks有： basic hooks usestate useeffect

4、usecontext additional hooks usereducer usecallback usememo useref useimperativehandle uselayouteffect usedebugvalue 固然了，授之以鱼不如授之以渔，react官方也提供了教你如何封装自己hook的文档building your own hooks，有爱好的小伙伴可以去阅读一下。 react-hanger初窥 大致的看了下react-hanger的源码之后发觉，这个库其实是对react hooks api的适用性封装。裸露一些更常用的hooks节约大家造轮子的工作量。 react的核

5、心开发者dan看到这个库也做了评价: 一个对hooks的隐喻。你可以将你的state挂起在你的function component上，等你回归的时候，它就挂在那。 本文写作时，react-hanger的usage里提供了6个api，从名字里就可以看出这些hook都是做什么的(hooks都以"use"开始，这是一种商定)， import useinput, useboolean, usenumber, usearray, useonmount, useonunmount from "react-hanger" 用法起来也很容易，比如usenumber const app = () = const showcounter = useboolean(true); const counter = usenumber(0); return ( increase showcounter.value && counter.value decrease ); ; 初步印象：大致与原始的basic hooks有点不同的是，usestate返回一个数组，分离是值与操作，而react-hanger提供的api貌似是将值和一些操作封装到一个对象中，比如counter就是一