Twaver-HTML5基础学习(20)数据容器(3)_数据的批量加载(节省性能方法)

最新推荐文章于 2022-10-19 23:13:50 发布

六卿

最新推荐文章于 2022-10-19 23:13:50 发布

阅读量413

点赞数 1

分类专栏： # Twaver HTML5 2d基础文章标签：拓扑 twaver twaver html5 性能前端拓扑

本文链接：https://blog.csdn.net/qq_43291759/article/details/124411590

版权

Twaver HTML5 2d基础专栏收录该内容

41 篇文章 10 订阅

订阅专栏

本文介绍了如何在React应用中利用twaver库的批量加载(batch loading)功能，提升在大量link对象场景下的数据加载和界面重绘效率，通过示例展示了如何在初始化网络时进行批量创建节点和链接。

摘要由CSDN通过智能技术生成

数据的批量加载

当两个节点之间有许多link对象时，可以使用批量加载功能box.startBatch()来提高数据加载效率。
批量加载会批量重绘界面，来减少界面重绘次数，提高效率。

使用方法：

  box.startBatch(() => {
            for (var i = 0, len = 1500; i < len; i++) {
                var to = new twaver.Node({
                    name: 'to',
                    location: { x: Math.random() * 600, y: Math.random() * 500 }
                });
                box.add(to);

                var link = new twaver.Link(node1, to);
                box.add(link);
            }
        })

传入一个回调函数即可。
在这里插入图片描述

react代码

/*
 * @Descripttion: 
 * @version: 
 * @Author: ZhangJunQing
 * @Date: 2022-04-18 14:44:05
 * @LastEditors: ZhangJunQing
 * @LastEditTime: 2022-04-25 18:40:42
 */
import React, { useEffect, useState } from 'react'
import {
    returnElementBoxAndNetworkFun,
    returnNodeFun,
    returnLineFun,
} from './utils'
const twaver = require('twaver');
// const demo = require('demo');
const Demo = () => {
    const [network, setnetwork] = useState({})
    const init = () => {
        const [box, network] = returnElementBoxAndNetworkFun()
        setnetwork(_ => network)
        network.invalidateElementUIs();
        document.getElementById("testID").appendChild(network.getView());
        // 设置最初的大小
        network.adjustBounds({ x: 0, y: 0, width: 800, height: 800 });

        let node1 = returnNodeFun(box, { name: "第一个node", location: { x: 100, y: 100 } })
        // 数据的批量加载
        // 当两个节点之间有许多link对象时，可以使用批量加载功能box.startBatch()来提高数据加载效率。
        // 批量加载会批量重绘界面，来减少界面重绘次数，提高效率。
        box.startBatch(() => {
            for (var i = 0, len = 1500; i < len; i++) {
                var to = new twaver.Node({
                    name: 'to',
                    location: { x: Math.random() * 600, y: Math.random() * 500 }
                });
                box.add(to);

                var link = new twaver.Link(node1, to);
                box.add(link);
            }
        })
    }
    useEffect(init, [])
    return (
        <>
            <p style={{ fontSize: "20px", paddingLeft: "50px", poaddingTop: "50px" }}>tips: </p>
            <ul style={{ fontSize: "20px", paddingLeft: "50px" }}>
                <li>数据序列化</li>
            </ul>
            {/* 画布元素需要开启定位 不然生成的图元坐标点会偏移 */}
            <div id="testID" style={{ width: "800px", height: "800px", border: "1px solid #ccc", position: "relative" }}></div>
        </>
    )
}
export default Demo