useStore

此 hook 可用於訂閱 React Flow 元件的內部狀態變更。useStore hook 是從 Zustand 狀態管理函式庫重新匯出的，因此您應該查看他們的文檔以獲取更多詳細資訊。

只有在沒有其他方法可以存取內部狀態時才應使用此 hook。對於許多常見的用例，都有專用的 hooks 可用，例如 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 hook 中的範例相反，後者僅在點擊按鈕時才計算節點數量。

選擇按需計算值還是訂閱變更的發生有點像是一種平衡行為。一方面，在事件處理常式中進行過多的繁重計算會使您的應用程式感覺遲緩或無回應。另一方面，主動計算值可能會導致緩慢或不必要的重新渲染。

我們同時提供此 hook 和 useStoreApi，以便您可以選擇最適合您使用情況的方法。

簽名

名稱	類型
#參數
#`selector`	`(state: ReactFlowState) => T` 一個選擇器函式，傳回流程內部狀態的一部分。提取或轉換您需要的狀態是一種避免不必要重新渲染的好習慣。
#`equalityFn?`	`(prev: T, next: T) => boolean` 一個比較前一個值和下一個值的函式。這對於防止不必要的重新渲染非常有用。好的預設值是使用 Object.is 或導入 zustand/shaddlow，但您可以根據需要進行細化。
#回傳
#	`T`

範例

觸發 store 行動

您可以透過 useStore hook 觸發內部行動來操作內部 React Flow 狀態。這些行動已在整個函式庫中內部使用，但您也可以使用它們來實作自訂功能。

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

可以透過輸入選擇器函式來輸入此 hook。請參閱我們的 Typescript 指南中的此章節以獲取更多資訊。

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

筆記

您應該在使用它的元件外部定義您的 store 選擇器函式，或使用 React 的 useCallback hook 來記憶函式。不這樣做可能會導致輕微的效能損失。

Hooks Utils