What

翻译一下就是“钩子”。当然，这样说还是相当于没说，那就做一点补充。
比如，直观理解计算机的行为就是输入->处理->输出，对吧？我们简单打印一下

console.log('hi');

然后这个事情就像一条直线，直接执行输出hi完事。

image.png

很明显，每次都是hi肯定没什么实际作用，所以我们需要变量，定义函数，传入参数，让这个打印行为变得更具实际。

var content="ha";

fun print(privateContent){
  console.log(privateContent);
}

print(content);

自然而然，我们想到了OOP（面向对象编程）。在OOP中，将相关的属性状态行为抽象内聚为一个整体，对外表现为一个对象。

class Person{
  constructor(someWord) {
    this.content= someWord;
  }
 sing(){
    console.log(`sing ${content}`);
 }
 say(){
    console.log(`say ${content}`);
 }
}

var shone = new Person("woo");
shone.sing();
shone.say();

回到前端，主要是视图。视图的状态与行为不一定要耦合（不一定要抽象为一个类），因为是在跟视图打交道，React一直在推行图形渲染的无状态方式，想想canvas绘图的render。

钩子的意思就是说，本身没有数据状态，每次运行都是从外部获取状态，用“钩子”钩进来用。
这个时候就想一条直线有几个圈圈，从外头圈点东西进来。嗯，就是这样。

image.png

跟DOM打交道有许多桎梏，我觉得前端人在造概念上是越走越远了。可以同时类比一下“生命周期”、“依赖注入”、“回调”这些概念，本质上应该都是在做解耦。不管怎样的称呼和概念，请记住一点，我们搞花里胡哨的目的只是为了复用、提高开发效率、好维护、易扩展。

How

• hooks-intro
• react-hooks