zoukankan      html  css  js  c++  java
  • 自定义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 和副作用都是完全隔离的。

  • 相关阅读:
    js作用域链
    函数声明提升
    18年年终总结之谈谈焦虑这件事
    混合开发中ios兼容问题
    vue 缓存的keepalive页面刷新数据
    vue里监听安卓的物理返回键
    vue根据数组对象中某个唯一标识去重
    Sublime Text3 插件
    全面理解Javascript闭包和闭包的几种写法及用途
    javascript深入理解js闭包
  • 原文地址:https://www.cnblogs.com/xinyouhunran/p/15578480.html
Copyright © 2011-2022 走看看