跟着官方文档能学懂Hooks就怪了

回想下你入门Hooks的过程，是不是经历过：

目前成都创新互联公司已为上千家的企业提供了网站建设、域名、网络空间、网站运营、企业网站设计、东乌珠穆沁网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。

1. 类比ClassComponent的生命周期，学习Hooks的执行时机
2. 慢慢熟练以后，发现Hooks的执行时机和生命周期又有些不同。比如componentWillReceiveProps对应哪个Hooks?
3. 感到困惑，去搜一些Hooks原理层面的文章阅读

作为一个API，不该简简单单、可可爱爱的照着文档调用就行么，Hooks为什么这么难?

React官方也发现了这个问题，在React要重写文档了讲到，React要基于Hooks重写文档。

本文主要包括2方面内容：

1. 解释Hooks难学的原因
2. 给出学习Hooks的建议

React的底层架构

可以用一个公式概括React：

 
 
 
 

  
  
  
  
const UI = fn(state);
 
 
 
 

视图可以看作状态经过函数的映射。

用户与界面的交互，可以看作这个公式的不断执行。

这个公式太精简了，没有解释state(状态)从哪儿来，我们扩展下：

 
 
 
 

  
  
  
  
const state = reconcile(update);
  
  
  
  
const UI = fn(state);
 
 
 
 

1. 用户交互产生update(更新)
2. update经过reconcile步骤计算出当前应用的state
3. fn将state映射为视图变化(UI)

我们给fn起个名字：commit：

 
 
 
 

  
  
  
  
const state = reconcile(update);
  
  
  
  
const UI = commit(state);
 
 
 
 

那么update在哪里产生呢?当然来自于用户交互，比如：点击事件。

所以React的底层架构可以简化为三步：

• 用户交互产生update
• state = reconcile(update);
• UI = commit(state);

了解了底层架构，我们再来看通过类比ClassComponent学习Hooks会带来的问题。

生命周期函数的抽象层级

我们已经有了完整的驱动视图更新的底层架构，开发者该怎么操作这套架构呢?

可以用计算机的抽象层级来类比：

 
 
 
 

  
  
  
  
高层：应用程序
  
  
  
  
中层：操作系统
  
  
  
  
底层：计算机组成架构
 
 
 
 

对应React：

 
 
 
 

  
  
  
  
高层：应用程序       ClassComponent生命周期
  
  
  
  
中层：操作系统       介入架构的API
  
  
  
  
底层：计算机组成架构  React底层架构
 
 
 
 

可以看到，生命周期函数属于抽象程度比较高的层次。这么设计也是为了让开发者更容易上手React。

设想一个Vue2开发者要转React技术栈，只需要类比Vue的生命周期来学习React的生命周期就行了。

这一切在Hooks到来前都没问题，然而......

Hooks的抽象层级

Hooks属于中等抽象层级。也就是说，Hooks直接介入底层架构的运行流程。

 
 
 
 

  
  
  
  
高层：应用程序       
  
  
  
  
中层：操作系统       Hooks
  
  
  
  
底层：计算机组成架构  React底层架构      
 
 
 
 

当我们用生命周期函数来类比Hooks时，其实是用高抽象层级的事物来描述低抽象层级的事物。

动物 --> 哺乳动物 --> 牛 --> 奶牛

对于一个只见过奶牛，再没见过其他动物的人，你怎么向他解释哺乳动物是啥?

正是由于抽象层级的不对称，造成通过生命周期函数类比学习Hooks会遇到问题。

该怎么学Hooks

既然Hooks属于中等抽象层，离底层很近，那么更好的学习方式是通过底层向上学习。

祭出我们的三步公式：

• 用户交互产生update
• state = reconcile(update);
• UI = commit(state);

对照公式，我们来讲解几个常见hook的工作流程：

useState

举个例子：

 
 
 
 

  
  
  
  
function App() {
  
  
  
  
  const [state, updateState] = useState(0);
  
  
  
  
  return  updateState(state + 1)}>