2020年08月_七月是我的生日

原创 React中的四种样式使用优缺点比较

1.组件化天下下的CSScss的设计就不是为组件化而生的，所以在目前组件化的框架中都在需要一种合适的CSS解决方式。组件化中选择合适的CSS解决方案应该符合以下条件：1.可以编写局部的css：css具备自己的局部作用域，不会随意污染其他组件内部的样式。2.可以编写动态的css：可以获取当前组件的一些状态，根据状态的变化生成不同的css样式。3.支持所有的css特性：伪类，动画，媒体查询等。4.编写起来简单方便，最好符合一贯的css风格特点，2.React中的CSS3.react中常见

2020-08-31 13:14:52 1335

原创 React知识点补充

1.setState不可变的数据首先明确一点为了保证PureComponent以及我们为了实现项目优化自己写的shouldComponent能够正确渲染页面，setState不允许直接修改state中的数据，我们最好是将其备份一份，然后进行修改。shouldComponentUpdate()传过来了两个参数nextProps, nextStatenextProps ：最新的propsnextState ：最新的state每一次在内部进行浅层比较，props以及state是否发生了变化，

2020-08-29 14:24:59 191

原创 React setState一些解析以及 react性能优化

详解setState1.开发中我们并不能直接通过修改state的值来让界面发生更新：因为我们修改了state之后,希望React根据最新的State来重新渲染界面,但是这种方式的修改React并不知道数据发生了变化;React并没有实现类似于Vue2中的Object.defineProperty或者Vue3中的Proxy的方式来监听数据的变化;我们必须通过setState来告知React数据E经发生了变化;2.setState函数是我们继承的Component原型中定义的。3.setStat

2020-08-23 16:40:15 881

原创 Mxgraph 实战教程（12）：使用mxgraph实现一个流程图

前面我们讲解了mxgraph的基础操作和进阶操作，从这一节其，我们将开始两个实战项目。第一个mxgraph实现流程图实现效果：如果对大家有用的话，记得帮我github点个star，谢谢大家！git地址：小康的流程图...

2020-08-08 00:17:38 2153

原创 Mxgraph 使用教程（11）：mxgraph手动添加节点和边（节点和边点击事件）,并按照要求格式导出数据

上文我们介绍了，mxgraph如何在页面不刷新的情况下，通过请求不同文件生成不同的mxgraph图，本文我们将讲述mxgraph手动添加节点和边，并且按照原本数据格式导出数据。1.准备工作准备工作代码<template> <div> <div class="Oinput"> <input type="text" placeholder="请输入对应的城市名称......" /> <button>生.

2020-08-08 00:17:25 5941

原创 Mxgraph 使用教程（10）：mxgraph单页面请求数据实现图形热更新

上文我们讲解了如何根据数据生成对应的mxgraph图，本文我们讲解单页面请求多个文件，生成mxgraph图。这也是我的项目需求之一。1.准备工作：原始数据：mxgraphData: [ { nodesList: [ [0, "Hello"], [1, "Mxgraph"], ], edgesList: [[0, "label", 1]], }, .

2020-08-07 20:43:30 1971

原创 Mxgraph 使用教程（9）：mxgraph根据需求数据生成对应mxgraph图

本文将讲解如何按照对应的数据生成mxgraph图形1.准备工作2.模拟数据 mxgraphData: [ { nodesList: [ [0, "宝鸡市"], [1, "渭南市"], [2, "西安市"], [3, "汉中市"], [4, "安康市"], ], edgesList: [ .

2020-08-07 20:43:21 3160

原创 Mxgraph 使用教程（8）：mxgraph进行查看xml 和 xml回显

上文我们讲述了mxgraph布局算法，本文讲述mxgraph进行xml回显和图片保存1.xml回显准备工作还是上文的教程查看mxgraph图形的xml //查看图形的xml document.body.appendChild(mxUtils.button('View XML', function() { var encoder = new mxCodec(); var node = encoder.enco.

2020-08-07 20:43:12 4649 1

原创 Mxgraph 使用教程（7）：给mxgraph图添加默认布局

上文我们讲解了添加工具操作，这一节我们讲解给生成图形添加默认布局1.准备工作多添加几个几点：生成如下所示的图形代码： try { var v1 = graph.insertVertex( parent, null, "Hello,", 20, 200, 100, 50, 'nodeStyle' ); .

2020-08-07 20:42:54 2908 1

原创 Mxgraph 使用教程（6）：给mxgraph图添加操作工具按钮

上文我们讲解了mxgraph图如何设置样式，接下来我们给我们的mxgraph图添加一些操作工具吧1.准备工作2.添加操作按钮  <div id="methods"> <div ref="buttons"></div> </div>refs选中的元素为生成的button所在的父级//定义操作按钮 //放大节点 this.$refs.

2020-08-07 20:42:36 2289 2

原创 Mxgraph 使用教程（5）：mxgraph图设置样式的两种方式

上文我们了解了基本的mxgraph内容，这节我们来给节点和边设置样式1.第一种方式（行内式）上文的图形最终效果：添加样式： var v1 = graph.insertVertex( parent, null, "Hello,", 20, 200, 100, 50, "fillColor=#3CAEA3;strokeColor=white.

2020-08-07 20:42:21 4739 2

原创 Mxgraph 使用教程（4）：详解mxgraph示例demo - Hello World

提示：接下来所有演示均以vue为主1.在vue中实现一个hello -world<template> <div> <div id="graphContainer" ></div> </div></template><script>import mxgraph from "./mxgraph";const { mxGraph, mxClient, .

2020-08-07 20:42:12 3313 2

原创 Mxgraph 使用教程（3）：本地引入mxgraph和 vue中引入mxgraph

1.本地引入mxgraph第一步：下载mxgraph库github地址：https://github.com/jgraph/mxgraph第二步：clone项目打开项目-》进入javascript第三步：本地使用mxgraph一个官方示例demo:<html><head> <title>Hello, World! example for mxGraph</title> <!-- Sets the basepath for the

2020-08-07 20:42:00 6070 4

原创 Mxgraph 使用教程（2）：mxgraph常用方法介绍

1.mxgraph常用包（这个js类库被分成了8个包。）1. 最上层的mxClient类包括或者动态导入了其他的包。当前的版本存储在maxClient.VERSION中。2. mxEditor包提供了图表编辑器相关的类实现。入口函数式mxEditor。3.view和model包实现了图表组件。他引用的mxGraphModel包含了mxCells和缓存了mxGraphView中的cells的状态。4.mxCellRender基于mxStylesheet中的定义来渲染cells的外观。mxUndoMa

2020-08-07 20:41:43 7206 1

qq_43955202的博客