Javascript React组件仅处理数据（无渲染组件）

我想知道使用react处理数据组件（方法）是否可以接受，或者应该如何调用它

下面是一个例子来描述我的意思：

应从api获取的数据对象示例：

从“React”导入React；

//api响应的示例。
数据={
id:1，
名称：“foo”，
值：“baz”，
}

//src/components/api/useApiHook.js
const useApiHook=（）=>{
const[response，setResponse]=React.useState（{}）；
const fetchData=（请求）=>
axios
.post（'https://url.com/api/data“，{…请求}）
.then（{data}）=>setResponse（{…data}））；
返回{fetchData，response}；
};

可能

exampleData

的名称应该大写

//src/components/Example/exampleData.js
const exampleData=（）=>{
const[data，setData]=React.useState（null）；
const{fetchData，response}=useApiHook（）；
//我是说，在非jsx组件中，我应该这样使用react吗
React.useffect（（）=>{
fetchData（）；
}, []);
React.useffect（（）=>{
如果（答复）{
返回setData（响应）
}
}[答复]；
//
//收到响应后，返回之前
//我们可以提供一些操作，或者这样。
//
返回数据；
};

应该呈现数据的主要组件。 每当

exampleData

->
数据
得到一些更新时，我们就能够呈现这些新数据

//src/components/Example/Example.js
常量示例=（）=>{
const data=exampleDataComponent（）；
返回(
id:{data.id}

名称：{data.name}

值：{data.value}

);
};


这种结构的原因是将渲染和数据操作/聚合分开。我在示例中省略了验证和验证。通常，我想做的一切都是api钩子和jsx之间的某种中间服务（
exampleData
）

我的问题：这样的方法是否可以在现实生活中使用？代码运行得很好，但我想你明白了

多谢各位

附加的工作代码段


//获取一个钩子函数
//从“React”导入React
//从“react dom”导入react dom
//const{useState，useffect，createElement}=React；
//const{render}=ReactDOM；
/**
*API挂钩
*/
const useApiHook=（）=>{
const[response，setResponse]=React.useState（{}）；
//post（'url/api/data'，{…data}）.then（{res}）=>setResponse（{…res}））；
const fetchData=（）=>setResponse（（）=>{
log（“[step-3]useApiHook | fetching data@fetchData”）；
返回{
id:1，
姓名：“山姆”，
位置：'驾驶员'
};
});
log（'@useApiHook | return{fetchData，response}| Current response'，response）；
返回{
获取数据，
响应
};
};
/**
*数据操纵器/聚合器。
*/
const exampleData=（）=>{
const[data，setData]=React.useState（null）；
const{fetchData，response}=useApiHook（）；
React.useffect（（）=>{
log（“[step-2]useEffect |从：exampleData调用fetchData”）；
fetchData（）；
}, []);
React.useffect（（）=>{
log（'[step-4]调用useEffect'）；
如果（答复）{
console.log（“[步骤4]设置数据（响应）”，响应）；
返回setData（响应）；
}
}[答复]；
//
//收到响应后，返回之前
//我们可以提供一些操作，或者这样。
//
console.log（“[step-5]exampleData返回数据：”，数据）；
返回数据；
};
常量示例=（）=>{
log（“[step-1]示例：initialize exampleData（）”）；
const data=exampleData（）；
log（“[最新步骤]示例：数据属性：”，数据）；
const text=data&&data.id&&Object.values（data.join）（“：”）
返回React.createElement（'div'，null，text）；
};
const domContainer=document.querySelector（'#root'）；
render（React.createElement（示例），domContainer）

为什么不使用
exampleData
与
useApiHook
中相同的方法？您可能可以在自定义中创建所有这些hook@ViniciusKatata实际上是的，我可以使用
exampleData
作为钩子
useExampleData
。但我只是好奇这种方法，以及什么是最好的方法。