Skip to Content
参考手册钩子
useStore()

useStore()

GitHub 上的源代码 

¥Source on GitHub 

此钩子可用于订阅 React Flow 组件的内部状态更改。useStore 钩子从 Zustand  状态管理库重新导出，因此你应该查看其文档以了解更多详细信息。

¥This hook can be used to subscribe to internal state changes of the React Flow component. The useStore hook is re-exported from the Zustand  state management library, so you should check out their docs for more details.

仅当没有其他方法访问内部状态时才应使用此钩子。对于许多常见用例，都有专用的钩子可用，例如 useReactFlow、useViewport 等。

¥This hook should only be used if there is no other way to access the internal state. For many of the common use cases, there are dedicated hooks available such as useReactFlow, useViewport, etc.

import { ReactFlow, useStore } from '@xyflow/react';
 
const nodesLengthSelector = (state) =>
  state.nodes.length || 0;
 
const NodesLengthDisplay = () => {
  const nodesLength = useStore(nodesLengthSelector);
 
  return <div>The current number of nodes is: {nodesLength}</div>;
};
 
function Flow() {
  return (
    <ReactFlow nodes={[...]}>
      <NodesLengthDisplay />
    </ReactFlow>
  );
}

此示例预计算节点数。每当流中的节点数发生变化时，<NodesLengthDisplay /> 组件都会重新渲染。这与 useStoreApi 钩子中的示例形成对比，该示例仅在单击按钮时计算节点数。

¥This example computes the number of nodes eagerly. Whenever the number of nodes in the flow changes, the <NodesLengthDisplay /> component will re-render. This is in contrast to the example in the useStoreApi hook that only computes the number of nodes when a button is clicked.

选择是按需计算值还是订阅更改发生时的变化有点平衡。一方面，在事件处理程序中放入太多繁重的计算会使你的应用感觉迟缓或无响应。另一方面，预计算值可能会导致缓慢或不必要的重新渲染。

¥Choosing whether to calculate values on-demand or to subscribe to changes as they happen is a bit of a balancing act. On the one hand, putting too many heavy calculations in an event handler can make your app feel sluggish or unresponsive. On the other hand, computing values eagerly can lead to slow or unnecessary re-renders.

我们同时提供此钩子和 useStoreApi，以便你可以选择最适合你用例的方法。

¥We make both this hook and useStoreApi available so that you can choose the approach that works best for your use-case.

签名

¥Signature

#Params
#selector
(state: ReactFlowState) => T
A selector function that returns a slice of the flow's internal state. Extracting or transforming just the state you need is a good practice to avoid unnecessary re-renders.
#equalityFn?
(prev: T, next: T) => boolean
A function to compare the previous and next value. This is incredibly useful for preventing unnecessary re-renders. Good sensible defaults are using Object.is or importing zustand/shallow, but you can be as granular as you like.
#Returns
#
T

示例

¥Examples

触发存储操作

¥Triggering store actions

你可以通过 useStore 钩子触发内部操作来操纵内部 React Flow 状态。这些操作已在整个库中内部使用，但你也可以使用它们来实现自定义功能。

¥You can manipulate the internal React Flow state by triggering internal actions through the useStore hook. These actions are already used internally throughout the library, but you can also use them to implement custom functionality.

import { useStore } from '@xyflow/react';
 
const setMinZoomSelector = (state) => state.setMinZoom;
 
function MinZoomSetter() {
  const setMinZoom = useStore(setMinZoomSelector);
 
  return <button onClick={() => setMinZoom(6)}>set min zoom</button>;
}

Typescript

可以通过键入选择器函数来键入此钩子。有关更多信息，请参阅此 我们的 Typescript 指南中的部分。

¥This hook can be typed by typing the selector function. See this section in our Typescript guide for more information.

const nodes = useStore((s: ReactFlowState<CustomNodeType>) => ({
  nodes: s.nodes,
}));

注释

¥Notes

  • 你应该在使用存储选择器函数的组件之外定义存储选择器函数，或者使用 React 的 useCallback 钩子来记忆该函数。不这样做可能会导致轻微的性能损失。

    ¥You should define your store selector function outside of the component that uses it, or use React’s useCallback hook to memoize the function. Not doing this can incur a slight performance penalty.

useReactFlow()
useStoreApi()