[技术分享]React Hooks 小解

shangjin发布于13 天前 • 40 次阅读

前言


最近看很多童鞋咨询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,所以会有一些不足,大家使用的时候,要注意取舍。

共收到 0 条回复