useStore

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

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

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 仅在单击按钮时计算节点数量的钩子。

选择是按需计算值还是订阅更改作为它们发生是一个平衡行为。一方面，在事件处理程序中放置太多繁重的计算会导致您的应用程序感觉迟缓或无响应。另一方面，急切地计算值会导致缓慢或不必要的重新渲染。

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

签名

名称	类型
#参数
#`selector`	`(状态: ReactFlowState) => T` 一个选择器函数，它返回流程内部状态的一部分。提取或转换您需要的状态是一个好习惯，可以避免不必要的重新渲染。
#`equalityFn?`	`(prev: T, next: T) => 布尔值` 一个函数来比较前一个值和下一个值。这对于防止不必要的重新渲染非常有用。良好的默认值是使用 Object.is 或导入 zustand/shaddlow，但您可以根据需要进行细化。
#返回值
#	`T`

示例

触发存储动作

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

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 指南中的部分了解更多信息。

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

备注

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

钩子工具