React 自定义hook函数-优快云博客

自定义hook函数可以干什么

让操作逻辑和渲染相分离

比如，下面这个场景：

在Home.jsx组件中，我们既在该组件里面，向后端发起请求获取频道数据（操作逻辑），也将交互后的响应频道数据渲染到了组件中（渲染），为了提高解耦性，我们可以使用自定义hook函数，将逻辑和渲染相分离。

const Home = () => {
    const [channels, setChannels] = useState([])
    
    useEffect(()=>{
        const getChannels = async () => {
            const res = await fetchChannelsApi()
            setChannels(res.data)
        }
    },[])

    return (
        <div>
            <Tabs>
                {channels.map((channel)=>(
                    <Tabs.Tab title={channel.name} key={channel.id}></Tabs.Tab>
                ))}
            </Tabs>
        </div>
    )
}

export default Home

自定义hook函数的命名规范：需要以use单词开头

根据上下文环境，我们将这个hook函数，取名为useChannels.jsx

注意！不要忘记将响应后的数据channels返回出去

function useChannels(){
    const [channels, setChannels] = useState([])
    
    useEffect(()=>{
        const getChannels = async () => {
            const res = await fetchChannelsApi()
            setChannels(res.data)
        }
        getChannels()
    },[])

    return {
        channels
    }
}

export {useChannels}

然后在Home.jsx中，我们就只需要导入useChannels，并使用其中的channels数据，渲染到组件上就行了

import { useChannels } from './useChannels'

const Home = () => {
    const { channels } = useChannels()

    return (
       <div>
            <Tabs>
                {channels.map((channel)=>(
                    <Tabs.Tab title={channel.name} key={channel.id}></Tabs.Tab>
                ))}
            </Tabs>
        </div>
    )
}

export default Home