React Hook 的学习（3）

之前说过Hook React有一些内置Hook，帮助您对组件的优化。但是我们可以根据自己的需求创造自定义Hook 我们假设一个场景，两个组件。一个为用户端商品组件，一个为商家端商品组件。其中两者都有共同的特点，知道该商品的类别。假设通过商品id使用外部cApi获取商品类别。

• 用户端商品组件

import React, { useState, useEffect } from 'react';

function commodityListUserItem(props) {
    const [category, setCategory] = useState(null);  
    useEffect(() => { 
         function handleCategoryChange(category) {      
             setCategory(category)
         }
            cAPI.subscribeCategoryFormId(props.data.id, handleCategoryChange);    
            return () => { 
                cAPI.unsubscribeCategoryFormId(props.data.id, handleCategoryChange);
            };

    });
    return (
        <li>
            用户item 商品类别是{category}
        </li>
    );
}

• 商家端商品组件

import React, { useState, useEffect } from 'react';

function commodityListBusinessItem(props) {
    const [category, setCategory] = useState(null);  
    useEffect(() => { 
         function handleCategoryChange(category) {      
             setCategory(category)
         }
            cAPI.subscribeCategoryFormId(props.data.id, handleCategoryChange);    
            return () => { 
                cAPI.unsubscribeCategoryFormId(props.data.id, handleCategoryChange);
            };

    });
    return (
        <li>
            商家item 商品类别是{category}
        </li>
    );
}

两者都有显示商品类别的功能 ， 那我们看可以自定义一个useCategory

import React, { useState, useEffect } from 'react';

function useCategory(props) {
    const [category, setCategory] = useState(null);  
    useEffect(() => { 
         function handleCategoryChange(category) {      
             setCategory(category)
         }
            cAPI.subscribeCategoryFormId(props.data.id, handleCategoryChange);    
            return () => { 
                cAPI.unsubscribeCategoryFormId(props.data.id, handleCategoryChange);
            };

    });
    return category
}

• 用户端商品组件

import React, { useState, useEffect } from 'react';

function commodityListUserItem(props) {

    const category = useCategory(props.data.id);
    return (
        <li>
            商家item 商品类别是{category}
        </li>
    );
}

• 商家端商品组件

import React, { useState, useEffect } from 'react';

function commodityListBusinessItem(props) {
    const category = useCategory(props.data.id);
    return (
        <li>
            商家item 商品类别是{category}
        </li>
    );
}

自定义 Hook 必须以 “use” 开头吗？ 必须如此。这个约定非常重要。不遵循的话，由于无法判断某个函数是否包含对其内部 Hook 的调用，React 将无法自动检查你的 Hook 是否违反了 Hook 的规则。

在两个组件中使用相同的 Hook 会共享 state 吗？ 不会。自定义 Hook 是一种重用状态逻辑的机制(例如设置为订阅并存储当前值)，所以每次使用自定义 Hook 时，其中的所有 state 和副作用都是完全隔离的。

自定义 Hook 如何获取独立的 state？ 每次调用 Hook，它都会获取独立的 state。由于我们直接调用了 useFriendStatus，从 React 的角度来看，我们的组件只是调用了 useState 和 useEffect。我们可以在一个组件中多次调用 useState 和 useEffect，它们是完全独立的。

- 在多个 Hook 之间传递信息

Hook 本身就是函数，因此我们可以在它们之间传递信息

const [recipientID, setRecipientID] = useState(1);  const isRecipientOnline = useFriendStatus(recipientID);

上述代码 recipientID 的变化。将变化信息传递给useFriendStatus的Hook中。

自定义Hook用法千变万化，还需努力。加油吧骚年！

React 中 也还有很多 Hook 前往去看看吧