标签：函数 自定义 React Hook useState 组件 useEffect

一、为什么要自定义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,Hook,useState,组件,useEffect
来源： https://blog.51cto.com/u_10976476/2845739

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。