React Hook介绍(四):如何开发一个自定义的Hook

一、为什么要自定义Hook

      将组件逻辑提到可重用的函数中,然后这些函数供它的Hook使用,或者函数组件使用,最终目的是形成公用的Hook库。

      最终根据不同的场景开发自定义不同类型的Hook.

二、函数名必须为"use"开头,在函数内部可以调用其它的hook(例如:useState,useEffect)

   例子:

import { useState, useEffect } from 'react';

function useFriendStatus(friendID) {  const [isOnline, setIsOnline] = useState(null);

  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }

    ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);
    };
  });

  return isOnline;
}

 

三、两个组件使用相同的Hook会共享state吗?不会

    每次调用 Hook,它都会获取独立的 state。

    我们可以在一个组件中多次调用 useState 和 useEffect,它们是完全独立的。

四、多个hook之间如何传递信息

     hook本身是函数,通过传参即可完成。

 

 

 

 

 

 

上一篇:React---新扩展Hooks和Fragment


下一篇:React Hook介绍(三): Hook必须遵守的两个规则