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

数据的批量加载

当两个节点之间有许多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

学习参考：TWaver Documents