useEdges()

GitHub 上的源代码 

¥Source on GitHub 

此钩子返回当前边缘的数组。使用此钩子的组件将在任何边缘发生变化时重新渲染。

¥This hook returns an array of the current edges. Components that use this hook will re-render whenever any edge changes.

import { useEdges } from '@xyflow/react';
 
export default function () {
  const edges = useEdges();
 
  return <div>There are currently {edges.length} edges!</div>;
}

签名

¥Signature

Typescript

此钩子接受自定义边缘类型的泛型类型参数。有关更多信息，请参阅此 我们的 Typescript 指南中的部分。

¥This hook accepts a generic type argument of custom edge types. See this section in our Typescript guide for more information.

const nodes = useEdges<CustomEdgeType>();

注释

¥Notes

• 不必要地依赖 useEdges 可能是导致性能问题的常见原因。每当任何边缘发生变化时，此钩子都会导致组件重新渲染。通常我们实际上关心的是更具体的事情，例如当边数发生变化时：尽可能尝试使用 useStore。

  ¥Relying on useEdges unnecessarily can be a common cause of performance issues. Whenever any edge changes, this hook will cause the component to re-render. Often we actually care about something more specific, like when the number of edges changes: where possible try to use useStore instead.