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 和副作用都是完全隔离的。

  • 相关阅读:
    Android查看应用方法数
    解决问题 inner element must either be a resource reference or empty.
    Android JSBridge原理与实现
    CDN详解
    Android studio 将 Module 打包成 Jar 包
    Imageloader、Glide、Fresco的性能及加载速度比较
    Mac之如何查看已用端口
    yum安装docker-ce-18.03.0
    脚本检测Kafka和Zookeeper
    Docker搭建ElasticSearch+Redis+Logstash+Filebeat日志分析系统
  • 原文地址:https://www.cnblogs.com/xinyouhunran/p/15578480.html
Copyright © 2011-2022 走看看