Javascript 为什么useQuery调用会导致在我的组件中重新呈现？

正如我们所知，react组件在其道具或状态更改时会重新渲染

现在我正在使用

useQuery

from

react apollo

包，如下所示：

import { gql, useQuery } from '@apollo/client';

const getBookQuery = gql`
  {
    books {
      name
    }
  }
`;

function BookList() {
    const { loading, error, data} = useQuery(getBookQuery);

    if(loading) return <p>Loading....</p>
    if(error) return <p>Ops! Something went wrong</p>

    return (
      <>
        <ul>
          {data.books.map(book => (
            <li key={book.name}>{book.name}</li>
          ))}
        </ul>
      </>
    )
}

export default BookList;

从'@apollo/client'导入{gql，useQuery}；
const getBookQuery=gql`
{
书{
名称
}
}
`;
函数BookList（）{
const{loading，error，data}=useQuery（getBookQuery）；
如果（加载）返回加载

if（error）returnOps！出问题了

返回(

{data.books.map（book=>(
{book.name}
))}

)
}
导出默认书目；

当我运行上面的代码时，我们首先在DOM中得到

加载…

，然后更新为包含查询数据的列表（一旦到达）。但react如何知道在从查询接收到数据后重新呈现组件

这些

数据

、

加载

和

错误

属性是否映射到组件道具并正在更新？如果是这样，为什么chrome开发工具没有为这个

BookList

组件显示任何道具

---

有人能解释一下这个

useQuery

自定义钩子是如何在这里工作的吗？

钩子可以有自己的状态，当状态发生变化时，可以触发重新加载。例如加载、错误、数据

我在这个沙箱中创建了apollo的useQuery钩子的示例实现

在伪实现中，可以看到钩子有状态，只要状态改变，组件就会重新呈现

还创建了另一个组件BookList2，其中我没有使用钩子，而是在组件中粘贴了钩子的伪实现——这样可能会更清楚地显示重新渲染是如何触发的

---

TLDR：检查-查看钩子可以有状态，更改时会导致重新启动

钩子可以有自己的状态，更改时会触发重新启动。例如加载、错误、数据

我在这个沙箱中创建了apollo的useQuery钩子的示例实现

在伪实现中，可以看到钩子有状态，只要状态改变，组件就会重新呈现

还创建了另一个组件BookList2，其中我没有使用钩子，而是在组件中粘贴了钩子的伪实现——这样可能会更清楚地显示重新渲染是如何触发的

---

<强> TLDR:检查-钩子可以有状态，当改变时可以导致重排< /强>

< P>一个很好的方法（粗略地理解）<代码> USEQue> <代码>是考虑你自己怎么做，例如

constmycomponent=（）=>{
const[data，setData]=useState（null）；
const[loading，setLoading]=useState（false）；
const[error，setError]=useState（null）；
useffect（异步（）=>{
试一试{
设置加载（真）；
const data=wait GraphQL.request（getBookQuery）；
setData（数据）；
}捕获（ex）{
设置错误（ex）；
}最后{
设置加载（假）；
}
}, []);
如果（加载）返回加载

if（error）returnOps！出问题了

返回(

{data.books.map（book=>(
{book.name}
))}

);
};

在上面，您可以看到您的组件具有状态（而不是道具）

数据

，

加载

和

错误

，这会导致组件重新渲染

您可以想象这个逻辑被包装在您自己的

useQuery

hook中：

constuseQuery=（查询，变量）=>{
const[data，setData]=useState（null）；
const[loading，setLoading]=useState（false）；
const[error，setError]=useState（null）；
useffect（异步（）=>{
试一试{
设置加载（真）；
const data=wait GraphQL.request（查询、变量）；
setData（数据）；
}捕获（ex）{
设置错误（ex）；
}最后{
设置加载（假）；
}
}, []);
返回{数据，加载，错误}；
}
常量MyComponent=（）=>{
const{data，loading，error}=useQuery（getBookQuery）；
如果（加载）返回加载

if（error）returnOps！出问题了

返回(

{data.books.map（book=>(
{book.name}
))}

);
};

---

<> p>所以最终你的组件是重新渲染的，因为它确实有<代码>数据> <代码>加载> <代码>和<代码>错误>代码>被保存在<代码> MyPosie<代码>状态中，它被抽象掉了。

一个很好的方法来（粗略地）在<代码> UsSuury中发生的事情是考虑你自己怎么做，例如

constmycomponent=（）=>{
const[data，setData]=useState（null）；
const[loading，setLoading]=useState（false）；
const[error，setError]=useState（null）；
useffect（异步（）=>{
试一试{
设置加载（真）；
const data=wait GraphQL.request（getBookQuery）；
setData（数据）；
}捕获（ex）{
设置错误（ex）；
}最后{
设置加载（假）；
}
}, []);
如果（加载）返回加载

if（error）returnOps！出问题了

返回(

{data.books.map（book=>(
{book.name}
))}

);
};

在上面，您可以看到您的组件具有状态（而不是道具）

数据

，

加载

和

错误

，这会导致组件重新渲染

您可以想象这个逻辑被包装在您自己的

useQuery

hook中：

constuseQuery=（查询，变量）=>{
const[data，setData]=useState（null）；
const[loading，setLoading]=useState（false）；
const[error，setError]=useState（null）；
useffect（异步（）=>{
试一试{
设置加载（真）；
const data=wait GraphQL.request（查询、变量）；
setData（数据）；
}捕获（ex）{
塞特罗