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

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);

问题是，它打印出来：

• 使用GW()
• oGW：{空对象}
• 使用GW()
• oGW：{空对象}
• 获取GW（）
• oGW : {有正确的回应}
• 使用GW()
• oGW : {有正确的回应}

我不明白为什么它效率如此之低以至于重新渲染 4x ？我如何使它高效？我试过玩useEffect的[]，但是重新渲染的量是一样的。

谢谢先进

标签： react-hooks