useCallback / useMemo与数组

Question

I'm having a problem with performance inside of my application. The reason being I'm using useCallback with lots of deps, as you can see below

const getTreeData = React.useCallback((tree: Area.Model[]): TreeItem[] => {
        let treeData: TreeItem[] = [];
        if (tree) {
            treeData = {
                flatData: tree.map(
                    (area): any => {
                        const areaKey = getKeyForArea(area.id, area.type, area.closestGroupId);
                        return {
                            id: area.id,
                            name: area.name,
                            type: area.type,
                            title: (
                                <TreeTitle
                                    id={area.id}
                                    key={area.id}
                                    type={area.type}
                                    title={area.name}
                                    closestGroupId={area.closestGroupId}
                                    expandable={area.drillableDirections !== undefined && area.drillableDirections.includes(Drill.Direction.DOWN)}
                                    status={status[areaKey]}
                                    counter={subAreas[areaKey]}
                                    unselectedStoreCounter={unselectedStoreCounter[areaKey]}
                                    onAggregationButtonClick={handleAggregateOptionToggle}
                                    onQuickAggregationOptionForSubGroups={handleQuickAggregateOptionForSubGroupsToggle}
                                    onQuickAggregationOptionForSubStores={handleQuickAggregateOptionForSubStoresToggle}
                                />
                            ),
                            parent: area.closestGroupId,
                            expanded: status[areaKey].isExpanded,
                        };
                    },
                ),
                getKey: (node: any): number => node.id,
                getParentKey: (node: any): number => node.parent || 0,
                rootKey: 0,
            };
        }
        return treeData;
    }, [status, subAreas, unselectedStoreCounter, handleAggregateOptionToggle, handleQuickAggregateOptionForSubGroupsToggle, handleQuickAggregateOptionForSubStoresToggle]);

As you can see, all of the dependencies are being used in the code. However, everytime there is a change, there will only be 1 element update, but the whole function will rerun and return a completely new object, which will trigger my render function in another places.

Therefore, my question is: is there a way for me to use useCallback or useMemo to optimise this code?

Answer 1

I think the root cause of your performance issue is that you are mounting too many dom elements. I have same issue with this and solved it by virtualizing the tree. I used react-virtualized-tree for this and here's how it goes.

VirtualizedTree.js

import React from 'react';
import PropTypes from 'prop-types';

import Tree from 'react-virtualized-tree/lib/Tree';
import TreeStateModifiers from 'react-virtualized-tree/lib/state/TreeStateModifiers'
import { UPDATE_TYPE } from 'react-virtualized-tree/lib/contants'
import { Node } from 'react-virtualized-tree/lib/shapes/nodeShapes';

export default class UnstableFastTree extends React.Component {
  static contextTypes = {
    unfilteredNodes: PropTypes.arrayOf(PropTypes.shape(Node))
  };

  get nodes() {
    return this.context.unfilteredNodes || this.props.nodes;
  }

  handleChange = ({ node, type, index }) => {
    let nodes;

    if (type === UPDATE_TYPE.UPDATE) {
      nodes = TreeStateModifiers.editNodeAt(this.props.nodes, index, node);
    } else {
      nodes = TreeStateModifiers.deleteNodeAt(this.props.nodes, index);
    }

    this.props.onChange(nodes);
  };

  render() {
    return (
      <Tree
        nodeMarginLeft={this.props.nodeMarginLeft}
        nodes={this.props.nodes}
        onChange={this.handleChange}
        NodeRenderer={this.props.children}
      />
    );
  }
}

UnstableFastTree.propTypes = {
  extensions: PropTypes.shape({
    updateTypeHandlers: PropTypes.object
  }),
  nodes: PropTypes.shape({
    flattenedTree: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.oneOf([PropTypes.number, PropTypes.string])))
      .isRequired,
    tree: PropTypes.arrayOf(PropTypes.shape(Node)).isRequired
  }),
  onChange: PropTypes.func,
  children: PropTypes.func.isRequired,
  nodeMarginLeft: PropTypes.number,
  width: PropTypes.number,
  scrollToId: PropTypes.number
};

UnstableFastTree.defaultProps = {
  nodeMarginLeft: 30
};

Tree.js

import React, { useMemo } from 'react'
import PropTypes from 'prop-types'
import pick from 'lodash/pick'
import VirtualizedTree from '@controls/VirtualizedTree'
import TreeState from 'react-virtualized-tree/lib/state/TreeState'
import TreeNode from './TreeNode'

export default function BrowseTree(props) {
  const {
    treeData
  } = props
  const getAllNodes = all => all.reduce((acc, el) => [
    ...acc,
    el,
    ...(el.collapse ? getAllNodes(el.children) : [])
  ], [])
  const nodes = useMemo(() => TreeState.createFromTree(treeData), [treeData])
  const treeProps = pick(props, [
    'type', 'selectedNodeId', 'onNodeClick', 'onHideDialog', 'onShowDialog',
    'browseToggle', 'disableIds', 'config', 'fetching', 'topicIcon', 'role'
  ])
  return (
    <VirtualizedTree nodes={nodes}>
      {({ style, node }) => (
        <TreeNode
          key={node.db_id}
          style={style}
          node={node}
          {...treeProps}
        />
      )}
    </VirtualizedTree>
  )
}

BrowseTree.propTypes = {
  type: PropTypes.string.isRequired,
  treeData: PropTypes.array.isRequired
}

I hope this helps.