React-Hooks-04-自定义hook的四个典型使用场景

2021-07-19 20:59:22 阅读：212 来源： 互联网

标签：count loading return 自定义 04 Hooks state error const

简单的例子，简单计数器实现，抽离业务逻辑成为hook：

function useCounter() {
    const [count, setCount] = useState(0)
    
    const increment = useCallback(() => {
        setCount(count + 1)
    }, [count])
    
    const decrement = useCallback(() => {
        setCount(count - 1)
    }, [count])
    
    const reset = useCallback(() => {
        setCount(0)
    }, [count])
    
    return { count, increment, decrement, reset }
}

在组件中使用这个hook：

function Counter() {
    const { count, increment, decrement, reset } = useCounter()
    return (
        <div>
            <p>{ count }</p>
            <button onClick={decrement}>-</button>
            <button onClick={increment}>+</button>
            <button onClick={reset}>reset</button>
        </div>
    )
}

和高阶组件相比，更加简单

三个典型业务场景
封装通用逻辑：useAsync
- 如：发起异步请求获取数据并显示在界面上

处理这类请求时，模式都是类似的，通常遵循下面的步骤：

创建data、loading、error这3个state
请求发出后，设置loading state为true
请求成功后，将返回的数据放到某个state中，并将loading state设为false
请求失败后，设置error state为true，并将loading state设为false

最后，基于state、loading、error这三个state数据，UI就可以正确显示数据了

将逻辑抽离出来：

const useAsync = (asyncFunction) => {
    // 设置3个异步逻辑相关的state
    const [data, setDate] = useState(null)
    cosnt [loading, setLoading] = useState(false)
    const [error, setError] = useState(null)
    // 定义一个callback用于执行异步逻辑
    const execute = useCallback(() => {
        setLoading(true)
        setData(null)
        setError(null)
        return asyncFunction()
            .then((response) => {
                setData(response)
                setLoading(false)
            })
            .catch((erro) => {
                setError(erro)
                setLoading(false)
            })
    }, [asyncFunction])
    
    return { execute, loading, data, error }
}

在组件中使用：

function UserList() {
    const {
        execute: fetchUsers,
        data: users,
        loading,
        error
    } => useAsync(async() => {
        const res = await fetch("http://req/api/users/")
        const json = await res.json()
        return json.data // response
    })
    return (
        // UI...
    )
}

监听浏览器状态：useScroll
- 界面需要根据在窗口大小变化重新布局
- 在页面滚动时，需要根据滚动条位置，来决定是否显示一个“返回顶部”的按钮

对应到这个场景就是：

-组件需要绑定到当前滚动条的位置数据上

const getPosition = () => {
    return {
        x: document.body.scrollLeft,
        y: document.body.scrollTop
    }
}

const useScroll = () => {
    const [position, setPosition] = useState(getPosition())
    useEffect(() => {
        const handler = () => {
            setPosition(getPosition())
        }
        document.addEventListener("scroll", handler)
        return () => {
            document.removeEventListener("scroll", handler)
        }
    }, [])
    return position
}

使用，是否展示返回顶部：

function ScrollTop {
    const { y } = useScroll()
    const goTop = useCallback(()=> {
        document.body.scrollTop = 0
    }, [])
    
    // y会根据scroll动态改变
    if ( y > 300 ) {
        return (
            <button onClick={goTop}>
                Back to Top
            </button>
        )
    }
    return null
}

标签：count,loading,return,自定义,04,Hooks,state,error,const
来源： https://blog.csdn.net/qq_34895059/article/details/118913677

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

ICode9

React-Hooks-04-自定义hook的四个典型使用场景