Question

我对React Hooks很陌生，我知道我可以在函数组件中使用React Hooks。我习惯于使用Redux而不是Hooks。我想要实现的是代码重用，就像Redux一样，您可以将操作存储在1个文件中并导出它们，并在许多基于类的组件中使用它们。例如，在许多组件中，我需要有一个可用部门的列表，通过启动操作然后在reducers / store中读取结果，可以轻松地获得它。

回到Hooks的现实世界，我可以在每个功能组件中使用useState，useEffect等，但是就代码重用而言，这将是非常糟糕的做法。因此，我尝试创建一个自定义钩子，在这里我只调用这些钩子，然后得到结果，并且组件可以刷新。

因此，通过这个简单的create-react-app，我将自定义钩子保存在如下的hooks.js文件中：

export const useGW = (pcode) => {
    const [response, setResponse] = useState({});
    console.log("useGW()");
    useEffect(() => {
        async function fetchGW() {
            console.log("fetchGW()");
            var options = {
                method: 'GET',
                headers: { 'content-type': 'application/json', "XSP": pcode },
                url: '=====EDITED======'
            };
            let res = await axios(options)
            setResponse(res.data);
        }
        fetchGW();
    },[])
    return response
}

，然后从App.js中导入并调用它：

function App() {
  const response = useGW('dev');
  console.log('oGW : ', response);

问题是，它打印出来了：

useGW（）
oGW：{空对象}
useGW（）
oGW：{空对象}
fetchGW（）
oGW：{具有正确的响应}
useGW（）
oGW：{具有正确的响应}

我不明白为什么效率如此之低以至于它重新渲染4倍？如何提高效率？我尝试过使用[]的useEffect，但是重新渲染的数量是相同的。

谢谢你

优化自定义React Hooks-数据获取

0 个答案: