{"expireTime":9007200828528711000,"key":"transformer-remark-markdown-html-7e3bb971ca0c3fe177b45a5aa80db81f-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":"

什么是 state

\n

G6 中的 state，指的是状态，包括交互状态和业务状态两种。

\n

交互状态

\n

交互状态是与具体的交互动作密切相关的，如用户使用鼠标选中某个节点，hover 到某条边。

\n

G6 中默认处理的是交互状态。

\n

业务状态

\n

指根据用户业务需求自定义的状态。业务状态是与交互动作无关的，与具体业务逻辑强相关的，也可理解为是强数据驱动的。如某个任务的执行状态、某条申请的审批状态等，不同的数据值代表不同的业务状态。业务状态与用户交互动作无关，但在 G6 中的处理方式同交互状态一致。

\n

何时使用 state

\n

判断是否该使用 state 的原则很简单，从交互和业务两个层面来看：

\n\n

满足上述条件其一，则应该使用 state。

\n

配置不同 state 的样式

\n

在 G6 中，配置交互状态和业务状态的方式是相同的。对于部分只使用 G6 来完成某个需求的开发，而不想深入理解G6的用户，其实不用区分交互状态和业务状态的区别，使用相同的方式定义状态，使用相同的方式使用状态，完全没有理解成本。

\n

在 G6 中，定义 state 时，我们有两种选择：

\n\n

实例化 Graph 时定义 state 样式

\n
const graph = new G6.Graph({\n  container: 'mountNode',\n  width: 800,\n  height: 600,\n  defaultNode: {\n    shape: 'diamond',\n    style: {\n      // 默认状态样式\n      fill: 'blue',\n    },\n  },\n  nodeStateStyles: {\n    hover: {\n      // hover 状态为 true 时的样式\n      fill: '#d3adf7',\n    },\n    running: {\n      // running 状态为 true 时的样式\n      stroke: 'steelblue',\n    },\n  },\n});\n
\n

上面的实例代码中，我们在实例化 Graph 时候，通过 nodeStateStyles 定义了交互状态 hover 和业务状态running，当用户操作过程中，鼠标 hover 到某个节点上时，节点的填充色就会变为指定的颜色，当某个任务状态变为正在执行时，节点的边框就会变为 running 状态定义的颜色。
\"3.gif\"

\n

同理，defaultEdge 中的 style 属性定义了默认状态下边的样式，使用 edgeStateStyles 可以定义不同状态下边的样式。

\n

自定义节点和边时定义 state 样式

\n

下面代码是在自定义节点时候通过 stateStyles 定义的交互状态 hover 和 selected。用户在操作过程中，如果hover到某个节点，则节点的透明度会变为 0.8，如果选中某个节点，选中节点的边框宽度变为 3。

\n
G6.registerNode('customShape', {\n  // 自定义节点时的配置\n  options: {\n    size: 60,\n    style: {\n      lineWidth: 1\n    },\n    stateStyles: {\n      // 鼠标hover状态下的配置\n      hover: {\n        fillOpacity: 0.8\n      },\n      // 选中节点状态下的配置\n      selected: {\n        lineWidth: 3\n      }\n    }\n  }\n}
\n

\"3.gif\"

\n

使用 state

\n

不管使用哪种方式，当我们定义好了 state 以后，使用 graph.setItemState 来使定义的状态生效。

\n

那么，我们该在什么地方使用 graph.setItemState 来使 state 生效呢？一种是直接使用 graph.on 监听事件，在回调中使 state 生效，另一种是在自定义 Behavior 中使 state 生效。

\n

graph.on

\n

在回调函数中使定义的交互状态 hover 生效。

\n
graph.on('node:mouseenter', evt => {\n  const { item } = evt;\n  graph.setItemState(item, 'hover', true);\n});\n\ngraph.on('node:mouseleave', evt => {\n  const { item } = evt;\n  graph.setItemState(item, 'hover', false);\n});\n
\n

Behavior

\n

在自定义 Behavior 中使定义的交互状态 selected 生效。

\n
G6.registerBehavior('nodeClick', {\n  getEvents() {\n    return {\n      'node:click': 'onClick',\n    };\n  },\n  onClick(e) {\n    e.preventDefault();\n    if (!this.shouldUpdate.call(this, e)) {\n      return;\n    }\n    const { item } = e;\n    const graph = this.graph;\n    graph.setItemState(item, 'selected', true);\n  },\n});\n
\n

小结

\n

G6 底层提供了状态管理的能力，通过使用 state，简化了状态管理，降低了用户的认知成本。更多关于 G6 中状态的内容请参考 G6 状态量思考。

"}