到底是什么是响应式编程？大家各执一词，模模糊糊，懵懵懂懂。很多人没有把他的本质说明白。从我多年的编程经验来看，响应式编程就是「使用异步数据流编程」。我们来看看前端在处理异步操作的时候通常是怎么做的，常见的异步操作有异步请求和页面的鼠标操作事件，在处理这样的操作的时候，我们通常采取的方法是事件循环，也就是异步事件流的方式。但是事件循环并没有显式的解决事件依赖问题，而是需要我们自己在编码的时候做好调用顺序的管理，比如：

const x = 1;const a = (x) => new Promise((r, j)=>{  const y = x + 1;
    r(y);
});const b = (y) => new Promise((r, j)=>{  const z = y + 1;
    r(z);
});const c = (z) =>  new Promise((r, j)=>{  const w = z + 1;
    r(w);
});// 上面是三个异步请求，他们之间有依赖关系，我们通常的操作是a(x).then((y)=>{
    b(y).then((z)=>{
      c(z).then((w)=>{          // 最终的结果
      console.log(w);
      })
  })
})

上述的基于事件流的回调方式，我们使用 Hooks 来替换的话，就是这样的：

import { useState, useEffect } from 'react';const useA = (x) => {    const [y, setY] = useState();
  useEffect(()=>{    // 假设此处包含异步请求
      setY(x + 1);
  }, [x]);  return y;
}const useB = (y) => {    const [z, setZ] = useState();
  useEffect(()=>{    // 假设此处包含异步请求
      setZ(y + 1);
  }, [y]);  return z;
}const useC = (z) => {    const [w, setW] = useState();
  useEffect(()=>{    // 假设此处包含异步请求
      setW(z + 1);
  }, [z]);  return w;
}// 上面是三个是自定义 Hooks，他表明了每个变量数据之间的依赖关系，你甚至不需要// 知道他们每个异步请求的返回顺序，只需要知道数据是否发生了变化。const x = 1;const y = useA(x);const z = useB(y);const w = useC(z);// 最终的结果console.log(w);

我们从上面的例子看到， Hooks 的写法，简直就像是在进行简单的过程式编程一样，步骤化，逻辑清晰，而且每个自定义 Hooks 你可以把他理解为一个函数，他不需要与外界共享状态，他是自封闭的，可以很方便的进行测试。