react hooks 小解

前言

---

最近看很多童鞋咨询hooks的情况，小编就写一篇介绍下吧，本文是小编对一些钩子的解释和理解，具体的大家可以去看文档。

hooks的优劣

---

其实文档上都有，小编也只是挑重要的说下，hooks更加契合react的思想，使函数组件有了props和state，部分替代了class组件，毕竟少编译一次。劣势是还不能完全替代class组件，目前阶段还缺少部分api。

hooks和redux等第三方库的关系

***‘
hooks只是能替代一部分第三方库的功能，可以合用，不能完全替代，因为类似redux第三方库的作用就是存数据，已经暴露一些钩子操作数据。hooks也有类似功能，useContext可以跨级传递值，useReducer可以返回state和dispatch，两者配合，可以实现在组件最顶层存储相关数据。大家看到这里，是不是想起了以前一个很火的替代redux的方案，react中的Context属性，传递操作函数和值给子组件，达到替代redux的效果。useContext和useReducer结合起来也差不多能达到类似相果，具体如何用，大家看文档。

重点说说需要解释的api

---

有些api很简单，大家只要知道生命周期，就好了，有些就很难，小编这里挑两个解释，剩下的大家看文档。

• useCallback
• useRef

useCallback

---

具体大家去看文档，小编只说下自己的理解，useCallback可以是任何函数的回调，它的作用是当依赖不变时，只返回一个渲染一次的函数，节省性能，具有大家看看文档就懂了。这个函数的好处为某些特定情形下，react依赖的props和state提供了逃生通道。

useRef

---

这个api作用有两个，第一个是返回关联的react组件对象，第二个作用是它的.current 可以获得关联react组件对象的state，props，方法，也就是文档所说的一个current属性可变且可以容纳任一值的class实例。
额外解释下文档中的代码

const intervalRef = useRef();

  useEffect(() => {
    const id = setInterval(() => {
      // ...
    });
    intervalRef.current = id;
    return () => {
      clearInterval(intervalRef.current);
    };
  });

intervalRef中的current可变，印证了文档的内容，我们可以在外面获取current的值，进行下一步操作。
我们也可可以修改current内容，把intervalRef.current 的值改成数组，对象，然后按照数组对象的取值方式取值，我们也可以把intervalRef 直接给某个子组件，来获得子组件中的state的值，实现父子通讯，具体看下面代码。

const intervalRef = useRef();
const getCurrent = () => {
    const {
      current
    } = intervalRef 
    const {
      state: {
      }
    } = current
   // do something
}
...
...
<Button onClick={e=>getCurrent()}></Button>
<Child ref={intervalRef } />

后记

---

react hooks更加轻便好用，但是因为是新的api，所以会有一些不足，大家使用的时候，要注意取舍。