useNodes()

GitHub 上的源代码 

¥Source on GitHub 

此钩子返回当前节点的数组。使用此钩子的组件将在任何节点发生变化时重新渲染，包括选择或移动节点时。

¥This hook returns an array of the current nodes. Components that use this hook will re-render whenever any node changes, including when a node is selected or moved.

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

签名

¥Signature

Typescript

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

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

const nodes = useNodes<CustomNodeType>();

注释

¥Notes

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

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