useStoreApi

在某些情况下，您可能需要直接访问存储。此 Hook 返回存储对象，可以按需使用它来访问状态或分发操作。

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

import { useState, useCallback } from 'react';
import { ReactFlow, useStoreApi } from '@xyflow/react';
 
const NodesLengthDisplay = () => {
  const [nodesLength, setNodesLength] = useState(0);
  const store = useStoreApi();
 
  const onClick = useCallback(() => {
    const { nodes } = store.getState();
    const length = nodes.length || 0;
 
    setNodesLength(length);
  }, [store]);
 
  return (
    <div>
      <p>The current number of nodes is: {nodesLength}</p>
      <button onClick={onClick}>Update node length.</button>
    </div>
  );
};
 
function Flow() {
  return (
    <ReactFlow nodes={nodes}>
      <NodesLengthLogger />
    </ReactFlow>
  );
}

此示例按需计算流程中的节点数量。这与useStore Hook 中的示例形成对比，该示例在节点数量发生变化时重新渲染组件。

选择按需计算值还是订阅更改是一个权衡问题。一方面，在事件处理程序中放置过多的繁重计算可能会导致您的应用程序感觉迟钝或无响应。另一方面，急切地计算值会导致缓慢或不必要的重新渲染。

我们提供了此 Hook 和useStore，以便您可以选择最适合您的用例的方法。

签名

名称	类型
#返回
#	`Zustand.StoreApi<ReactFlowState>`

TypeScript

此 Hook 接受自定义节点和边类型的泛型类型参数。有关更多信息，请参见我们 TypeScript 指南中的本节。

const store = useStoreApi<CustomNodeType, CustomEdgeType>();

Hooks 工具函数