自定义hook什么时候用，运用自定义hook提取状态逻辑

自定义hook什么时候用，我理解为：当存在这么一个值，你需要在多个地方使用，这时候就可以将此值和它相关的处理逻辑提炼成一个自定义hook，并抛出此值。

形如：定义一个获取参数列表的自定义hook，并将得到的参数列表值存在dataTypeList。

由于各个页面获取的参数值都不一样，在没有抽离前，你需要在每个页面定义state值，并重复多次写同样的逻辑。

现在将这个state值抽离成自定义hook，如下

const useDataTypeList = () => { 
    const [dataTypeList, setDataTypeList] = useState<any>({}) //参数列表 
    const getDataTypeList = (typeArray: Array<string>)=>{ 
        //获取字典参数，假设已封装接口并返回promise
        getDictByCodes(typeArray).then((res) => { 
            //console.log(res) 
            setDataTypeList(res) 
        }) 
    } 
    //甚至更多复杂的逻辑，但是页面通用，抽离出来封装 
    return { 
        dataTypeList, 
        setDataTypeList, 
        getDataTypeList, 
    } 
} 
 
export default useDataTypeList

 在其他组件页面使用时，直接引入

import useDataTypeList from './useDataTypeList'

//在函数组件中声明即用

const {
  dataTypeList,
  setDataTypeList,
  getDataTypeList          
} = useDataTypeList()

这样大大减少了组件中重复逻辑代码，值也可以直接使用。

在需要使用的组件内引用自定义hook，并引入此值，自定义 Hook 是一种重用状态逻辑的机制，所以每次在不同页面使用自定义 Hook 时，其中的所有 state 和副作用都是完全隔离的。