前言

 

千呼万唤始出来，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组件有state，能够处理更加复杂的逻辑。但是基于class的组建并不是完美的，总结起来就像Dan说的那样，有三个主要的问题：

 

代码重用：在hooks出来之前，常见的代码重用方式是HOCs和render props，这两种方式带来的问题是：你需要解构自己的组件，非常的笨重，同时会带来很深的组件嵌套

 

复杂的组件逻辑：在class组件中，有许多的lifecycle 函数，你需要在各个函数的里面去做对应的事情。这种方式带来的痛点是：逻辑分散在各处，开发者去维护这些代码会分散自己的精力，理解代码逻辑也很吃力

 

class组件的困惑：对于初学者来说，需要理解class组件里面的this是比较吃力的(这个理由有点勉强——)，同时，基于class的组件难以优化(举个不恰当的例子，看一下babel转移出来的class代码量增长了多少)

 

为了解决上面的这三个问题，react hooks提案登场了，它有以下几个特点：

 

无痛接入，不破坏现有的项目结构

 

完全向后兼容，不包含任何不兼容breaking changes

 

现在就能使用

 

Hooks 允许你在不编写 class 的情况下使用状态(state)和其他 React 特性。 你还可以构建自己的 Hooks, 跨组件共享可重用的有状态逻辑。

 

现在React中内置的Hooks有：

 

Basic Hooks

 

useState

 

useEffect

 

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的核心开发者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 (

 

    <div>

 

      <button onClick={counter.increase}> increase </button>

 

      {showCounter.value && <span> {counter.value} </span>}

 

      <button onClick={counter.decrease}> decrease </button>

 

    </div>

 

  );

 

};

 

初步印象：大致与原始的basic hooks有点不同的是，useState返回一个数组，分别是值与操作，而react-hanger提供的API貌似是将值和一些操作封装到一个对象中，比如counter就是一个{value: count, increase: setCount(count + 1), decrease: setCount(count - 1) }的对象。