React useEffect 详解：如何使用空数组 [] 控制请求频率

当第二个参数为一个空数组[]时，useEffect只会在组件第一次渲染时执行一次。\n\n在这种情况下，可以通过在组件内部定义一个函数，在useEffect中调用该函数来进行请求。这样，每次组件重新渲染时，useEffect都会重新执行一次，而函数内部的请求则会根据需要进行。\n\n下面是一个示例：\n\njavascript\nimport React, { useEffect } from 'react';\nimport axios from 'axios';\n\nconst MyComponent = () => {\n useEffect(() => {\n const fetchData = async () => {\n try {\n const response = await axios.get('https://api.example.com/data');\n console.log(response.data);\n } catch (error) {\n console.error(error);\n }\n };\n\n fetchData();\n }, []);\n\n return (\n <div>\n {/* 组件的内容 */}\n </div>\n );\n};\n\nexport default MyComponent;\n\n\n在上面的例子中，useEffect中的回调函数定义了一个名为fetchData的异步函数，该函数通过axios库发送一个GET请求到https://api.example.com/data。当组件第一次渲染时，useEffect会调用fetchData函数并输出请求返回的数据。之后，useEffect的回调函数不会再次执行，因为第二个参数为一个空数组[]，所以不会再次发起请求。