库反应查询使用什么模式（与 OOP 挂钩）？

Question

我从 react-query 库中看到了一个模式，它执行以下操作：

（面向对象）

// it instantiates an object from a class
const queryClient = new QueryClient()

（上钩）

// Then it passes this object as a prop to the provider

<QueryClientProvider client={queryClient}>
  <Todos />
</QueryClientProvider>

并且在 <Todos /> 组件中，此库为您提供了使用客户端或挂钩的选项。

//待办事项

const client = useQueryClient(); // (Hook)

const query = useQuery( key, fn, option ); // (Hook)

我无法理解的是这个库如何能够在正常 javascript class 对象（即 client 和其他挂钩的使用之间保持其状态同步。我的意思是，例如，您可以使用 useQuery 钩子和 key 作为第一个参数，这个钩子的作用是执行 fn 函数并存储在 query.

中产生 data 属性

有趣的是，您可以通过从 client.

调用以下方法来使用此 data

const { data } = client.getState(key);

那么为了使 classic javascript 对象和挂钩保持同步，它在幕后实际上做了什么？

const client = useQueryClient(); // (Hook)

const query = useQuery( key, fn, option ); // (Hook) 

// ----> in sync : query.data === client.getState(key).data

Answer 1

这是因为事实来源是那个查询客户端对象。它包含缓存（也类）和一堆访问它们的方法等等。

我想你可以在某个模块中实例化它，然后导入它并访问它，如果你想做的只是在某处的某个对象中保持可变状态。但部分魅力在于将缓存函数的调用与对该状态的访问结合起来做出反应：在组件安装时调用查询，并让对相同结果感兴趣的其他组件都等待相同的结果。让新安装的组件调查数据是否过时。在计时器上重新获取数据，但所有组件只获取一个数据，依此类推。

通过钩子集成到 React 生命周期函数中（所有自尊的现代 React 库都必须有一些钩子！），因为它们可以以简单和声明的方式进入您的组件生命周期：“使用”一些资源。

这些钩子然后使用 Reacts 生命周期钩子，以及 QueryClient 中的缓存和方法。因为 QueryClientProvider 通过反应上下文提供 queryClient，所以您不必 export/import 在整个模块中实例化 QueryClient，它们会自己找到它。

在定义反应上下文的模块顶层有一个小技巧here

我做了一个小codesandbox你可以看看here

如果你想重温观察者模式，你可以这样做here

并与 this 没有上下文的应用程序状态演练进行比较。

此外，不要忘记如何使用对象引用作为函数参数can have side effect。

库反应查询使用什么模式（与 OOP 挂钩）？

What pattern does the library react query uses (hooks with OOP)?

javascript

oop

reactjs

react-hooks

react-query