AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

如何优雅的在react-hook中进行网络请求

2022-06-10 771
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 如何优雅的在react-hook中进行网络请求

本文将介绍如何在使用React Hook进行网络请求及注意事项。

前言

Hook是在React 16.8.0版本中新加入的特性，同时在React-Native的0.59.0版本及以上进行了支持，使用hook可以不用class的方式的方式使用state，及类似的生命周期特性。

本片文章通过简单的网络请求数据的demo，来一起进一步认识react-hook这一特性，增加理解，涉及到的hook有useState, useEffect, useReducer等。

使用useState创建js页面

首先创建一个hook的功能页面demoHooks.js, 功能比较简单使用flatlist展示一个文本列表页面

const demoHooks = () => {
    // 初始值
    const [data, setData] = useState({hits: []});
    _renderItem = ({item}) => {
        console.log('rowData', item);
        return(
            <View style={{height: 50, backgroundColor: '#ff0', borderBottomColor: '#f0f', borderBottomWidth: 1, justifyContent: 'center'}}>
                    <Text style={{height: 20, width: 300}}>{item.title}</Text>
            </View>
        )
    };
    return (
        <View style={{backgroundColor: '#f5f5f5', marginTop: 20}}>
            <FlatList
                data={data.hits}
                renderItem={this._renderItem}
            />
        </View>
    );
};
export default demoHooks;

使用useEffect请求数据

import React, {useState, useEffect} from 'react';
import {
    Text,
    View,
    FlatList,
} from 'react-native';
import axios from 'axios'
// import CardView from 'react-native-cardview-wayne'
const demoHooks = () => {
    // 初始值
    const [data, setData] = useState({hits: []});
    // 副作用
    useEffect(async () => {
        const result = await axios('https://hn.algolia.com/api/v1/search?query=redux');
        setData(result.data);
        console.log('执行了')
    });
    _renderItem = ({item}) => {
        console.log('rowData', item);
        return(
            <View style={{height: 50, backgroundColor: '#ff0', borderBottomColor: '#f0f', borderBottomWidth: 1, justifyContent: 'center'}}>
                    <Text style={{height: 20, width: 300}}>{item.title}</Text>
            </View>
        )
    };
    return (
        <View style={{backgroundColor: '#f5f5f5', marginTop: 20}}>
            <FlatList
                data={data.hits}
                renderItem={this._renderItem}
            />
        </View>
    );
};
export default demoHooks;

我们使用effect hook函数获取数据，这里我们用到了一个axios网络请求框架。运行上述代码后，会发现其中的console会一直循环打印，我们知道useEffect函数会在render更新后也就是原来的(componentDidUpdate)进行调用。这里我们在函数中调用了setData设置接口返回数据，触发页面的更新机制，就造成了死循环。

其实我们只是需要再页面加载后执行一次即可，也就是在class写法中componentDidMount()进行数据请求。

useEffect提供了第二参数，用于解决此类问题。这里传入一个空数组[]，来让effect hook只在component mount后执行，避免在component update后继续执行。

// 副作用
    useEffect(async () => {
        const result = await axios('https://hn.algolia.com/api/v1/search?query=redux');
        setData(result.data);
        console.log('执行了')
    },[]);

第二个参数是effect hook的依赖项列表，依赖项中数据发生变化的时候，hook就会重新执行，如果依赖项为空，hook认为没有数据发生变更，在组件更新的时候就不会在此执行。

你会遇到的问题

An effect function must not return anything besides a function, which is used for clean-up.

微信图片_20220610115006.png

报错提示不能直接在useEffect中使用async，切实报错中也给出了解决方式，就是把async放在useEffect里面，修改如下，重新运行这个警告就消失了。

useEffect(() => {
        const fetchData = async () => {
            const result =  await axios('https://hn.algolia.com/api/v1/search?query=redux');
            setData(result.data);
        }
        fetchData();
        console.log('执行了')
    },[]);

效果页面如下微信图片_20220610115052.png

手动触发hook请求

现在我们实现手动触发hook网络请求，修改代码如下，加一个按钮，点击按钮后获取以“redux”为关键词的列表数据

import React, {useState, useEffect} from 'react';
import {
    Text,
    View,
    FlatList,
} from 'react-native';
import axios from 'axios'
import { TouchableOpacity } from 'react-native-gesture-handler';
const demoHooks = () => {
    // 初始值
    const [data, setData] = useState({hits: []});
    const [search, setSearch] = useState('')
    // 副作用
    useEffect(() => {
        const fetchData = async () => {
            const result =  await axios(`https://hn.algolia.com/api/v1/search?query=${search}`);
            setData(result.data);
        }
        fetchData();
        console.log('执行了')
    },[]);
    _renderItem = ({item}) => {
        console.log('rowData', item);
        return(
            <View style={{height: 50, backgroundColor: '#ff0', borderBottomColor: '#f0f', borderBottomWidth: 1, justifyContent: 'center'}}>
                    <Text style={{height: 20, width: 300}}>{item.title}</Text>
            </View>
        )
    };
    _search = () => {
        setSearch('redux')
    }
    return (
        <View style={{backgroundColor: '#f5f5f5', marginTop: 20}}>
            <TouchableOpacity onPress={this._search}>
                <View style={{backgroundColor: '#f00', paddingHorizontal: 10, paddingVertical: 5}}>
                    <Text>Search</Text>
                </View>
            </TouchableOpacity>
            <FlatList
                data={data.hits}
                renderItem={this._renderItem}
            />
        </View>
    );
};
export default demoHooks;

运行上述代码会发现，点击按钮后没有发生任何变化，细心的读者想必已经想到了，在代码中，useEffect hook的第二个参数是空数组，所以没有触发effect运行，重新获取数据，我们添加一下依赖项"search"到数组中，重新运行代码后，点击按钮就可看到我们的数据已经正确更新了。

// 副作用
    useEffect(() => {
        const fetchData = async () => {
            const result =  await axios(`https://hn.algolia.com/api/v1/search?query=${search}`);
            setData(result.data);
        }
        fetchData();
        console.log('执行了')
    },[search]);

添加一个加载框

数据请求是一个过程，通常在页面请求网络数据的时候会有一个友好的提示加载框，我们添加一个loading的state来实现一下。

import React, {useState, useEffect} from 'react';
import {
    Text,
    View,
    FlatList,
} from 'react-native';
import axios from 'axios'
import { TouchableOpacity } from 'react-native-gesture-handler';
const demoHooks = () => {
    // 初始值
    const [data, setData] = useState({hits: []});
    const [search, setSearch] = useState('')
    const [isLoading, setIsLoading] = useState(false)
    // 副作用
    useEffect(() => {
        const fetchData = async () => {
            setIsLoading(true);
            const result =  await axios(`https://hn.algolia.com/api/v1/search?query=${search}`);
            setData(result.data);
            setIsLoading(false);
        }
        fetchData();
        console.log('执行了', isLoading)
    },[search]);
    _renderItem = ({item}) => {
        // console.log('rowData', item);
        return(
            <View style={{height: 50, backgroundColor: '#ff0', borderBottomColor: '#f0f', borderBottomWidth: 1, justifyContent: 'center'}}>
                    <Text style={{height: 20, width: 300}}>{item.title}</Text>
            </View>
        )
    };
    _search = () => {
        setSearch('redux')
    }
    return (
        <View style={{backgroundColor: '#f5f5f5', marginTop: 20, flex: 1}}>
            <TouchableOpacity onPress={this._search}>
                <View style={{backgroundColor: '#f00', paddingHorizontal: 10, paddingVertical: 5}}>
                    <Text>Search</Text>
                </View>
            </TouchableOpacity>
            {
                isLoading ? <View style={{backgroundColor: 'pink', flex:1, alignItems: 'center', justifyContent: 'center'}}>
                <Text style={{color: '#f00', fontSize: 30}}>The Data is Loading ...</Text>
                </View> : <FlatList
                data={data.hits}
                renderItem={this._renderItem}
            />
            }
        </View>
    );
};
export default demoHooks;

网络请求错误的处理

错误处理是在网络请求中是非常必要的，添加一个error状态，使用try/catch来进行捕获处理。

const [isError, setIsError] = useState(false)
    // 副作用
    useEffect(() => {
        const fetchData = async () => {
            setIsError(false)
            setIsLoading(true);
            try{
                const result =  await axios(`https://hn.algolia.com/api/v1/search?query=${search}`);
                setData(result.data);
            }catch(error){
                setIsError(true);
            }
            setIsLoading(false);
        }
        fetchData();
        console.log('执行了', isLoading)
    },[search]);

CommonFetchApi

我们将上述代码提取出一个通用的网络请求hook也就是自定义一个hook,包含initialData,error,initialState等；自定义hook也是一个函数，在其内部可以调用其他hook函数，使用“use”开头。

import React, {useState, useEffect} from 'react';
import {
    Text,
    View,
    FlatList,
} from 'react-native';
import axios from 'axios'
import { TouchableOpacity } from 'react-native-gesture-handler';
const useDataApi = (initUrl, initData) => {
    const [data, setData] = useState(initData);
    const [url, setUrl] = useState(initUrl);
    const [isLoading, setIsLoading] = useState(false);
    const [isError, setIsError] = useState(false);
    // 副作用
    useEffect(() => {
        const fetchData = async () => {
            setIsError(false)
            setIsLoading(true);
            try{
                const result =  await axios(url);
                setData(result.data);
            }catch(error){
                setIsError(true);
            }
            setIsLoading(false);
        }
        fetchData();
    },[url]);
    return [{data, isLoading, isError}, setUrl];
}
const demoHooks = () => {
    const [search, setSearch] = useState('react')
    // 初始值
    const [{data, isLoading,isError}, fetchData ] = useDataApi(
        'https://hn.algolia.com/api/v1/search?query=redux',
        {hits: []});
    _renderItem = ({item}) => {
        return(
            <View style={{height: 50, backgroundColor: '#ff0', borderBottomColor: '#f0f', borderBottomWidth: 1, justifyContent: 'center'}}>
                    <Text style={{height: 20, width: 300}}>{item.title}</Text>
            </View>
        )
    };
    _search = () => {
        fetchData(`https://hn.algolia.com/api/v1/search?query=${search}`)
    }
    return (
        <View style={{backgroundColor: '#f5f5f5', marginTop: 20, flex: 1}}>
            <TouchableOpacity onPress={this._search}>
                <View style={{backgroundColor: '#f00', paddingHorizontal: 10, paddingVertical: 5}}>
                    <Text>Search</Text>
                </View>
            </TouchableOpacity>
            {
                isError && <View style={{backgroundColor: 'pink', flex:1, alignItems: 'center', justifyContent: 'center'}}>
                <Text style={{color: '#f00', fontSize: 30}}>网络请求出错了...</Text>
                </View>
            }
            {
                isLoading ? <View style={{backgroundColor: 'pink', flex:1, alignItems: 'center', justifyContent: 'center'}}>
                <Text style={{color: '#f00', fontSize: 30}}>The Data is Loading ...</Text>
                </View> : <FlatList
                data={data.hits}
                renderItem={this._renderItem}
            />
            }
        </View>
    );
};
export default demoHooks;

使用useReducer进行网络请求

以上通过综合使用useState 和 useEffect的方式实现了网络请求的loading,error，initstate的处理，可以看到我们在其中使用了4个useState处理响应的状态，其实我们也可以通过useReducer这个hook函数，来做统一管理，这里就类似于在class模式下，我们通常使用的react-redux进行数据流管理一样。

useReducer在很多时候可以用来替换useState， 接受两个参数(state, dispatch)返回一个计算后的新state,已达到更新页面的效果。

import React, {useState, useEffect, useReducer} from 'react';
import {
    Text,
    View,
    FlatList,
} from 'react-native';
import axios from 'axios'
import { TouchableOpacity } from 'react-native-gesture-handler';
const fetchDataReducer = (state, action) => {
    switch(action.type){
        case 'FETCH_INIT':
            return{
                ...state,
                isLoading: true,
                isError: false
            }
        case 'FETCH_SUCCESS':
            return {
                ...state,
                isLoading: false,
                isErroe: false,
                data: action.payload,
            }
        case 'FETCH_ERROR':
            return {
                ...state,
                isLoading: false,
                isErroe: false,
                data: action.payload,
            }
            break;
        default:
            return state;
    }
}
const useDataApi = (initUrl, initData) => {
    const [url, setUrl] = useState(initUrl);
    const [state, dispatch] = useReducer(fetchDataReducer,{
        data: initData,
        isLoading: false,
        isErroe: false
    })
    // 副作用
    useEffect(() => {
        const fetchData = async () => {
            dispatch({type: 'FETCH_INIT'})
            try{
                const result =  await axios(url);
                dispatch({type: 'FETCH_SUCCESS', payload: result.data})
            }catch(error){
                dispatch({type: 'FETCH_ERROR'})
            }
        }
        fetchData();
    },[url]);
    return [state, setUrl];
}
const demoHooks = () => {
    const [search, setSearch] = useState('react')
    // 初始值
    const [{data, isLoading,isError}, fetchData ] = useDataApi(
        'https://hn.algolia.com/api/v1/search?query=redux',
        {hits: []});
    _renderItem = ({item}) => {
        return(
            <View style={{height: 50, backgroundColor: '#ff0', borderBottomColor: '#f0f', borderBottomWidth: 1, justifyContent: 'center'}}>
                    <Text style={{height: 20, width: 300}}>{item.title}</Text>
            </View>
        )
    };
    _search = () => {
        fetchData(`https://hn.algolia.com/api/v1/search?query=${search}`)
    }
    return (
        <View style={{backgroundColor: '#f5f5f5', marginTop: 20, flex: 1}}>
            <TouchableOpacity onPress={this._search}>
                <View style={{backgroundColor: '#f00', paddingHorizontal: 10, paddingVertical: 5}}>
                    <Text>Search</Text>
                </View>
            </TouchableOpacity>
            {
                isError && <View style={{backgroundColor: 'pink', flex:1, alignItems: 'center', justifyContent: 'center'}}>
                <Text style={{color: '#f00', fontSize: 30}}>网络请求出错了...</Text>
                </View>
            }
            {
                isLoading ? <View style={{backgroundColor: 'pink', flex:1, alignItems: 'center', justifyContent: 'center'}}>
                <Text style={{color: '#f00', fontSize: 30}}>The Data is Loading ...</Text>
                </View> : <FlatList
                data={data.hits}
                renderItem={this._renderItem}
            />
            }
        </View>
    );
};
export default demoHooks;

页面销毁时中断网络请求

每个effect函数中都会返回一个函数用于清除操作，类似于class模式中的componentWillUnmount()进行移除监听操作，这个动作很重要，防止发生内存泄露及其他意想不到的情况，这里我们简单提供一个boolean值来在组件销毁时清除网络请求操作。

// 副作用
    useEffect(() => {
        let doCancel = false;
        const fetchData = async () => {
            dispatch({type: 'FETCH_INIT'})
            try{
                const result =  await axios(url);
                if(!doCancel){
                    dispatch({type: 'FETCH_SUCCESS', payload: result.data})
                }
            }catch(error){
                if(!doCancel){
                    dispatch({type: 'FETCH_ERROR'})
                }
            }
        }
        fetchData();
        return ()=>{
            doCancel = true;
        }
    },[url]);

总结

本文通过一个网络请求的demo讲述了react hooks部分API的使用及注意事项，这几个api也是平时开发工作中常见的，因此通过阅读本文，你应该可以收获如下内容：

  • useState的使用
  • useEffect的使用及注意事项
  • useReducer的使用
  • 自定义Hook的实现

本文对应的代码已上传至Github, RN-DEMO

文章标签：
JavaScript
前端开发
API
君伟说
目录
相关文章
你都不懂
|
4月前
|
前端开发
React useImperativeHandle Hook
【7月更文挑战第1天】React useImperativeHandle Hook
你都不懂
28 3
Clover&lsquo;sBlog
|
缓存 前端开发
【说说你对react hook的理解】
【说说你对react hook的理解】
Clover&lsquo;sBlog
56 0
木木木和小琳琳
|
前端开发
react hook
react hook
木木木和小琳琳
50 0
YiYa_咿呀
|
前端开发
React自定义Hook
React自定义Hook
YiYa_咿呀
105 0
游客phojfecwcv6ze
|
前端开发 JavaScript API
react Hook学习笔记
react Hook学习笔记
游客phojfecwcv6ze
135 0
游客ruqdfvh2iuyqc
|
前端开发 大数据
react 进阶hook 之 useMemo hook
memo hooks 这个钩子也是用来做优化性能操作的，大家一定还记得 React.memo() 这个是啥呢，是要给高阶组件，用来给函数组件做性能优化的，作用类似 类组件 的 pureComponent,那么 memo hooks 和 React.memo() 有没有联系呢? 没有，虽然都是为函数组件做性能优化的，但是优化的方向是不一样的(纯组件优化方向详情)。
游客ruqdfvh2iuyqc
159 0
react 进阶hook 之 useMemo hook
游客ruqdfvh2iuyqc
|
前端开发
react 进阶hook 之 useCallback hook
原因就是在于那个回调函数，还记得属性传入一个函数，如果是直接在事件后面绑定那么每一次render的时候就会重新生成一个函数。并且每一次的函数的地址都不一样，所以这就是为啥 父组件渲染，子组件也会跟着渲染的根本原因。
游客ruqdfvh2iuyqc
119 0
react 进阶hook 之 useCallback hook
前端歌谣
|
前端开发
react hook学习8-useReduce的使用
react hook学习8-useReduce的使用
前端歌谣
123 0
react hook学习8-useReduce的使用
前端歌谣
|
前端开发
react hook学习10-useMemo的使用
react hook学习10-useMemo的使用
前端歌谣
80 0
react hook学习10-useMemo的使用
前端歌谣
|
前端开发
react hook学习9-useCallback的使用
react hook学习9-useCallback的使用
前端歌谣
107 0
react hook学习9-useCallback的使用

热门文章

最新文章

  • 1
    SpringBoot开发案例之整合Dubbo提供者(一)
  • 2
    阿里AI上岗双11服装车间，能识别头发丝直径十分之一的瑕疵
  • 3
    Webpack构建library时的踩坑经历
  • 4
    安装nginx：src/os/unix/ngx_user.c:26:7: error: ‘struct crypt_data’ has no member named ‘curren
  • 5
    字节流套接口的读写
  • 6
    【转】类别catagory的用法
  • 7
    lsof 命令
  • 8
    TeamCity : 自动触发 Build
  • 9
    建站篇-用户认证系统-管理员登陆后台
  • 10
    asp.net学习之ado.net(无连接模式中的DataAdapter)
  • 1
    VideoChat：高效学习新神器！一键解读音视频内容，结合 AI 生成总结内容、思维导图和智能问答
    38
  • 2
    《C++巧筑智能框架根基：开启 AI 开发新航道》
    29
  • 3
    《跨越语言壁垒：Python 人工智能原型到 C++可执行程序的转型之路》
    25
  • 4
    Go语言中json序列化的一个小坑，建议多留意一下
    26
  • 5
    JVM常见面试题（四）：垃圾回收
    26
  • 6
    C语言物联网开发之设备安全与代码可靠性隐患
    22
  • 7
    C语言物联网开发之设备安全与代码可靠性隐患
    20
  • 8
    C 语言物联网开发之网络通信与数据传输难题
    19
  • 9
    Linux服务器安全
    16
  • 10
    Web应用防火墙（WAF）与数据库应用防火墙有什么区别？
    19

    • 相关课程

    更多
  • React 入门与实战
  • React 入门教程开发文档
  • Vue.js 入门与实战

    • 相关电子书

    更多
  • 利用编译将 Vue 组件转成 React 组件
  • React Native项目实战优化之路
  • React Native 全量化实践
    • 下一篇
    无影云桌面