如何在 React 项目中实现一个可折叠的树状菜单组件，支持多级菜单和节点展开 / 折叠状态管理,需要考虑哪些技术细节包括动画效果和用户交互逻辑以及性能优化？

于 2025-04-12 20:52:40 发布
阅读量831 收藏 13
点赞数 14
分类专栏： 大白话前端八股 文章标签： react.js 交互 性能优化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_37212162/article/details/147171013
版权

如何在 React 项目中实现一个可折叠的树状菜单组件，支持多级菜单和节点展开 / 折叠状态管理,需要考虑哪些技术细节包括动画效果和用户交互逻辑以及性能优化？

嘿，程序员朋友们！今天咱就来聊聊咋在 React 项目里搞出一个超酷炫的可折叠树状菜单组件。这个组件得支持多级菜单，还能管理每个节点的展开和折叠状态，另外动画效果、用户交互逻辑以及性能优化也都得安排上。

技术细节分析

  1. 状态管理：得用 React 的状态来记录每个节点是展开还是折叠。可以用一个对象来存储每个节点的状态，键就是节点的 ID，值就是展开或折叠的布尔值。
  2. 递归渲染：因为是多级菜单，所以得用递归的方式来渲染每个节点及其子节点。
  3. 动画效果：可以用 CSS 动画或者 React 的动画库来实现节点展开和折叠的动画，让菜单看起来更丝滑。
  4. 用户交互逻辑：用户点击节点的时候，得能切换节点的展开和折叠状态，还得处理好子节点的显示和隐藏。
  5. 性能优化：避免不必要的渲染，可以用 React.memo 来包裹组件，只在必要的时候更新。

代码实现

下面是一个完整的实现代码，我会在每句代码上面都加上注释：

import React, { useState, memo } from 'react';
import './styles.css'; // 假设你有对应的 CSS 文件来实现动画效果

// 定义一个函数组件来渲染树状菜单
const CollapsibleTreeMenu = ({ nodes }) => {
  // 使用 useState 来管理每个节点的展开和折叠状态
  const [expandedNodes, setExpandedNodes] = useState({});

  // 定义一个函数来处理节点的点击事件，切换节点的展开和折叠状态
  const handleToggle = (nodeId) => {
    setExpandedNodes((prevExpanded) => ({
      ...prevExpanded,
      [nodeId]: !prevExpanded[nodeId],
    }));
  };

  // 定义一个递归函数来渲染每个节点及其子节点
  const renderNode = (node) => {
    const isExpanded = expandedNodes[node.id];
    return (
      <div key={node.id}>
        {/* 节点的标题，点击时调用 handleToggle 函数切换状态 */}
        <div onClick={() => handleToggle(node.id)}>
          {/* 如果有子节点，显示一个展开或折叠的图标 */}
          {node.children && (
            <span>{isExpanded ? '▼' : '▶'}</span>
          )}
          {node.title}
        </div>
        {/* 如果节点展开且有子节点，递归渲染子节点 */}
        {isExpanded && node.children && (
          <div className="sub-menu">
            {node.children.map(renderNode)}
          </div>
        )}
      </div>
    );
  };

  return (
    <div className="tree-menu">
      {/* 渲染所有的根节点 */}
      {nodes.map(renderNode)}
    </div>
  );
};

// 使用 React.memo 来优化性能，避免不必要的渲染
export default memo(CollapsibleTreeMenu);

CSS 动画效果示例

你可以在 styles.css 文件里添加一些 CSS 动画效果，让菜单的展开和折叠看起来更流畅。

.sub-menu {
  overflow: hidden;
  transition: max-height 0.3s ease-out;
  max-height: 0;
}

.sub-menu.expanded {
  max-height: 1000px; /* 一个足够大的值 */
  transition: max-height 0.3s ease-in;
}

使用方法

在你的 React 项目里，你可以这样使用这个组件：

import React from 'react';
import CollapsibleTreeMenu from './CollapsibleTreeMenu';

const App = () => {
  const menuNodes = [
    {
      id: 1,
      title: '一级菜单 1',
      children: [
        {
          id: 2,
          title: '二级菜单 1',
        },
        {
          id: 3,
          title: '二级菜单 2',
          children: [
            {
              id: 4,
              title: '三级菜单 1',
            },
          ],
        },
      ],
    },
    {
      id: 5,
      title: '一级菜单 2',
    },
  ];

  return (
    <div>
      <h1>可折叠树状菜单</h1>
      <CollapsibleTreeMenu nodes={menuNodes} />
    </div>
  );
};

export default App;

总结

通过上面的代码，我们实现了一个可折叠的树状菜单组件，支持多级菜单和节点展开 / 折叠状态管理。同时，我们还考虑了动画效果、用户交互逻辑以及性能优化。你可以根据自己的需求进一步扩展和优化这个组件。

希望这个例子能帮助你在 React 项目里实现一个超棒的树状菜单！

那么，在实际项目开发当中，如何对可折叠的树状菜单组件进行性能优化

在实际项目开发里，对可折叠树状菜单组件进行性能优化可从多个方面着手，以下为你详细介绍：

减少不必要的渲染

  • 使用 React.memo：React.memo 是一个高阶组件，它能对组件的 props 进行浅比较，若 props 未发生变化，就不会重新渲染组件。
import React, { memo } from 'react';

const TreeNode = memo(({ node, onToggle }) => {
    // 组件逻辑
    return (
        <div onClick={() => onToggle(node.id)}>
            {/* 节点内容 */}
        </div>
    );
});

export default TreeNode;
  • 使用 shouldComponentUpdate：如果你使用的是类组件，那么可以通过 shouldComponentUpdate 生命周期方法来手动控制组件是否需要重新渲染。
import React, { Component } from 'react';

class TreeNode extends Component {
    shouldComponentUpdate(nextProps, nextState) {
        // 比较当前 props 和下一个 props
        return this.props.node.id!== nextProps.node.id || this.props.isExpanded!== nextProps.isExpanded;
    }

    render() {
        const { node, isExpanded, onToggle } = this.props;
        return (
            <div onClick={() => onToggle(node.id)}>
                {/* 节点内容 */}
            </div>
        );
    }
}

export default TreeNode;

虚拟列表技术

当树状菜单的节点数量较多时，可采用虚拟列表技术，只渲染可视区域内的节点，以此减少 DOM 元素的数量，进而提升性能。

  • 实现思路：计算可视区域的起始和结束索引，只渲染该范围内的节点。滚动时动态更新渲染的节点。
  • 示例库：react - virtualized、react - window 等。

懒加载子节点

  • 按需加载：对于具有大量子节点的节点，可采用懒加载的方式，仅在用户展开节点时再去加载子节点数据，避免一次性加载过多数据。
import React, { useState, useEffect } from 'react';

const TreeNode = ({ node, loadChildren }) => {
    const [children, setChildren] = useState([]);
    const [isExpanded, setIsExpanded] = useState(false);

    useEffect(() => {
        if (isExpanded) {
            loadChildren(node.id).then((newChildren) => {
                setChildren(newChildren);
            });
        }
    }, [isExpanded, loadChildren, node.id]);

    const handleToggle = () => {
        setIsExpanded(!isExpanded);
    };

    return (
        <div onClick={handleToggle}>
            {/* 节点内容 */}
            {isExpanded && children.map((child) => (
                <TreeNode key={child.id} node={child} loadChildren={loadChildren} />
            ))}
        </div>
    );
};

export default TreeNode;

优化事件处理

  • 事件委托：把事件处理函数绑定到父容器上，而非每个节点，从而减少事件处理函数的数量。
import React from 'react';

const TreeMenu = ({ nodes, onToggle }) => {
    const handleClick = (e) => {
        const nodeId = e.target.dataset.nodeId;
        if (nodeId) {
            onToggle(nodeId);
        }
    };

    return (
        <div onClick={handleClick}>
            {nodes.map((node) => (
                <div key={node.id} data - node - id={node.id}>
                    {/* 节点内容 */}
                </div>
            ))}
        </div>
    );
};

export default TreeMenu;

优化 CSS 动画

  • 使用硬件加速：借助 transform 和 opacity 属性实现动画，这些属性可利用 GPU 加速，从而提升动画性能。
.sub - menu {
    overflow: hidden;
    transition: transform 0.3s ease - out, opacity 0.3s ease - out;
    transform: scaleY(0);
    opacity: 0;
}

.sub - menu.expanded {
    transform: scaleY(1);
    opacity: 1;
}

通过上述这些方法，能够显著提升可折叠树状菜单组件的性能，为用户带来更流畅的使用体验。

在实现树状菜单组件的性能优化时，有不少第三方库能发挥作用，以下为你详细介绍：

虚拟列表相关库

  • react-virtualized
    • 特点：该库提供了多种虚拟列表组件，像 List、Grid 等，可用于高效渲染大量数据。在树状菜单中，它能仅渲染可视区域内的节点，减少 DOM 元素数量，进而提升性能。
    • 适用场景：适用于节点数量众多的树状菜单，尤其是数据量较大且需要滚动查看的情况。
    • 示例代码片段：
import React from 'react';
import { List } from 'react-virtualized';

const rowRenderer = ({ index, key, style }) => {
    // 渲染树状菜单的每一行节点
    return (
        <div key={key} style={style}>
            {/* 节点内容 */}
        </div>
    );
};

const TreeMenu = ({ nodes }) => {
    return (
        <List
            width={300}
            height={400}
            rowCount={nodes.length}
            rowHeight={30}
            rowRenderer={rowRenderer}
        />
    );
};

export default TreeMenu;
  • react-window
    • 特点：轻量级的虚拟列表库，与 react - virtualized 类似，但 API 更简洁，性能也较为出色。它同样能帮助树状菜单仅渲染可视区域的节点。
    • 适用场景：适合对性能要求较高且希望代码简洁的项目。
    • 示例代码片段：
import React from 'react';
import { FixedSizeList } from 'react-window';

const Row = ({ index, style }) => {
    // 渲染树状菜单的每一行节点
    return (
        <div style={style}>
            {/* 节点内容 */}
        </div>
    );
};

const TreeMenu = ({ nodes }) => {
    return (
        <FixedSizeList
            height={400}
            width={300}
            itemSize={30}
            itemCount={nodes.length}
        >
            {Row}
        </FixedSizeList>
    );
};

export default TreeMenu;

状态管理库

  • MobX
    • 特点：通过响应式编程来管理状态，能自动追踪状态的变化并更新相关组件，避免不必要的渲染。在树状菜单中，可用于管理节点的展开和折叠状态。
    • 适用场景：适用于需要复杂状态管理的树状菜单，尤其是状态变化频繁的情况。
    • 示例代码片段：
import React from 'react';
import { makeObservable, observable, action } from'mobx';
import { observer } from'mobx-react';

class TreeStore {
    expandedNodes = {};

    constructor() {
        makeObservable(this, {
            expandedNodes: observable,
            toggleNode: action
        });
    }

    toggleNode = (nodeId) => {
        this.expandedNodes[nodeId] =!this.expandedNodes[nodeId];
    };
}

const treeStore = new TreeStore();

const TreeNode = observer(({ node }) => {
    const isExpanded = treeStore.expandedNodes[node.id];

    const handleToggle = () => {
        treeStore.toggleNode(node.id);
    };

    return (
        <div onClick={handleToggle}>
            {/* 节点内容 */}
            {isExpanded && node.children.map((child) => (
                <TreeNode key={child.id} node={child} />
            ))}
        </div>
    );
});

export default TreeNode;
  • Redux
    • 特点：可预测的状态容器，能集中管理应用的状态。借助 reducer 来处理状态变化，能确保状态更新的可追溯性和可维护性。在树状菜单中，可用于管理全局状态。
    • 适用场景：适用于大型项目，需要多人协作开发且状态管理较为复杂的树状菜单。
    • 示例代码片段：
import React from 'react';
import { useSelector, useDispatch } from'react-redux';

const TreeNode = ({ node }) => {
    const dispatch = useDispatch();
    const expandedNodes = useSelector((state) => state.expandedNodes);
    const isExpanded = expandedNodes[node.id];

    const handleToggle = () => {
        dispatch({ type: 'TOGGLE_NODE', payload: node.id });
    };

    return (
        <div onClick={handleToggle}>
            {/* 节点内容 */}
            {isExpanded && node.children.map((child) => (
                <TreeNode key={child.id} node={child} />
            ))}
        </div>
    );
};

export default TreeNode;

动画库

  • React Spring
    • 特点：基于物理动画的 React 动画库，能创建流畅、自然的动画效果。在树状菜单中，可用于实现节点展开和折叠的动画。
    • 适用场景：适用于需要为树状菜单添加炫酷动画效果的项目。
    • 示例代码片段：
import React from 'react';
import { useSpring, animated } from'react-spring';

const TreeNode = ({ node, isExpanded }) => {
    const props = useSpring({
        height: isExpanded? 'auto' : 0,
        opacity: isExpanded? 1 : 0
    });

    return (
        <animated.div style={props}>
            {/* 节点内容 */}
        </animated.div>
    );
};

export default TreeNode;

这些第三方库从不同方面助力树状菜单组件的性能优化，你可以依据项目的具体需求来选择合适的库。

如何使用第三方库对树状菜单组件的展开和折叠状态进行优化？

使用第三方库对树状菜单组件的展开和折叠状态进行优化可以从状态管理、虚拟列表渲染、动画效果等方面入手，下面结合不同的第三方库详细介绍具体方法。

使用 MobX 优化状态管理

MobX 是一个响应式的状态管理库，它能自动追踪状态变化并更新相关组件，避免不必要的渲染。

安装
npm install mobx mobx-react
示例代码
import React from 'react';
import { makeObservable, observable, action } from'mobx';
import { observer } from'mobx-react';

// 定义树状菜单状态管理类
class TreeStore {
    // 存储每个节点的展开状态
    expandedNodes = {};

    constructor() {
        // 使 expandedNodes 可观察，toggleNode 成为可触发状态更新的动作
        makeObservable(this, {
            expandedNodes: observable,
            toggleNode: action
        });
    }

    // 切换节点展开状态的方法
    toggleNode = (nodeId) => {
        this.expandedNodes[nodeId] =!this.expandedNodes[nodeId];
    };
}

// 创建状态管理实例
const treeStore = new TreeStore();

// 定义树节点组件，使用 observer 包裹使其能响应状态变化
const TreeNode = observer(({ node }) => {
    // 获取当前节点的展开状态
    const isExpanded = treeStore.expandedNodes[node.id];

    // 处理节点点击事件，调用状态管理类的 toggleNode 方法
    const handleToggle = () => {
        treeStore.toggleNode(node.id);
    };

    return (
        <div onClick={handleToggle}>
            {node.title}
            {isExpanded && node.children && (
                <div>
                    {node.children.map((child) => (
                        <TreeNode key={child.id} node={child} />
                    ))}
                </div>
            )}
        </div>
    );
});

// 定义树状菜单组件
const TreeMenu = ({ nodes }) => {
    return (
        <div>
            {nodes.map((node) => (
                <TreeNode key={node.id} node={node} />
            ))}
        </div>
    );
};

export default TreeMenu;
代码解释
  • TreeStore 类负责管理树状菜单的展开和折叠状态，expandedNodes 对象存储每个节点的展开状态，toggleNode 方法用于切换节点状态。
  • TreeNode 组件使用 observer 包裹，使其能自动响应 expandedNodes 状态的变化，当状态改变时，组件会重新渲染。

使用 React Virtualized 优化渲染性能

当树状菜单节点数量较多时，使用 React Virtualized 可以只渲染可视区域内的节点，减少 DOM 元素数量，提升性能。

安装
npm install react-virtualized
示例代码
import React from 'react';
import { List } from'react-virtualized';

// 树节点渲染函数
const rowRenderer = ({ index, key, style, nodes }) => {
    const node = nodes[index];
    return (
        <div key={key} style={style}>
            {node.title}
            {/* 可根据需要添加展开折叠逻辑 */}
        </div>
    );
};

// 树状菜单组件
const TreeMenu = ({ nodes }) => {
    return (
        <List
            width={300}
            height={400}
            rowCount={nodes.length}
            rowHeight={30}
            rowRenderer={(props) => rowRenderer({...props, nodes })}
        />
    );
};

export default TreeMenu;
代码解释
  • List 组件是 React Virtualized 提供的虚拟列表组件，通过 rowRenderer 函数渲染每个节点。
  • rowRenderer 根据节点索引获取节点数据并渲染，只渲染可视区域内的节点，提高性能。

使用 React Spring 优化动画效果

React Spring 可以为树状菜单的展开和折叠添加流畅的动画效果。

安装
npm install react-spring
示例代码
import React, { useState } from 'react';
import { useSpring, animated } from'react-spring';

// 树节点组件
const TreeNode = ({ node }) => {
    const [isExpanded, setIsExpanded] = useState(false);

    // 使用 useSpring 创建动画效果
    const props = useSpring({
        height: isExpanded? 'auto' : 0,
        opacity: isExpanded? 1 : 0
    });

    // 处理节点点击事件，切换展开状态
    const handleToggle = () => {
        setIsExpanded(!isExpanded);
    };

    return (
        <div onClick={handleToggle}>
            {node.title}
            <animated.div style={props}>
                {node.children && (
                    <div>
                        {node.children.map((child) => (
                            <TreeNode key={child.id} node={child} />
                        ))}
                    </div>
                )}
            </animated.div>
        </div>
    );
};

// 树状菜单组件
const TreeMenu = ({ nodes }) => {
    return (
        <div>
            {nodes.map((node) => (
                <TreeNode key={node.id} node={node} />
            ))}
        </div>
    );
};

export default TreeMenu;
代码解释
  • useSpring 钩子用于创建动画效果，根据 isExpanded 状态控制节点的高度和透明度。
  • animated.div 是 React Spring 提供的动画组件，将动画属性应用到节点上，实现平滑的展开和折叠动画。

通过以上这些第三方库，可以从不同方面优化树状菜单组件的展开和折叠状态管理，提升用户体验和性能。

最后，在React项目的实际开发中，请给出加入模拟数据请求及数据更新，性能优化完整版的可以即插即用的可复用可折叠的树状菜单组件，支持多级菜单和节点展开 / 折叠状态管理及样式，以及正确引入并使用该组件的步骤：

以下是一个完整的可复用可折叠树状菜单组件，它包含模拟数据请求、数据更新、性能优化，同时支持多级菜单和节点展开/折叠状态管理，并且带有样式。

.tree-menu {
    font-family: Arial, sans-serif;
    padding: 10px;
}

.tree-node {
    margin-left: 20px;
}

.node-header {
    cursor: pointer;
    padding: 5px;
    display: flex;
    align-items: center;
}

.toggle-icon {
    margin-right: 5px;
}

.node-children {
    overflow: hidden;
}
    

import React, { useState, useEffect, useMemo, memo } from 'react';
import { useSpring, animated } from'react-spring';

// 模拟数据请求函数
const fetchTreeData = async () => {
    // 模拟异步请求
    await new Promise((resolve) => setTimeout(resolve, 1000));
    return [
        {
            id: 1,
            title: '一级菜单 1',
            children: [
                {
                    id: 2,
                    title: '二级菜单 1',
                    children: [
                        {
                            id: 3,
                            title: '三级菜单 1'
                        }
                    ]
                },
                {
                    id: 4,
                    title: '二级菜单 2'
                }
            ]
        },
        {
            id: 5,
            title: '一级菜单 2'
        }
    ];
};

// 树节点组件
const TreeNode = memo(({ node, expandedNodes, toggleNode }) => {
    const isExpanded = expandedNodes[node.id];

    const animationProps = useSpring({
        height: isExpanded? 'auto' : 0,
        opacity: isExpanded? 1 : 0,
        transform: isExpanded? 'translateY(0)' : 'translateY(-10px)',
        config: { duration: 300 }
    });

    return (
        <div className="tree-node">
            <div
                className="node-header"
                onClick={() => toggleNode(node.id)}
            >
                {node.children && (
                    <span className="toggle-icon">
                        {isExpanded? '▼' : '▶'}
                    </span>
                )}
                {node.title}
            </div>
            <animated.div style={animationProps} className="node-children">
                {isExpanded && node.children && (
                    <div>
                        {node.children.map((child) => (
                            <TreeNode
                                key={child.id}
                                node={child}
                                expandedNodes={expandedNodes}
                                toggleNode={toggleNode}
                            />
                        ))}
                    </div>
                )}
            </animated.div>
        </div>
    );
});

// 树状菜单组件
const TreeMenu = () => {
    const [nodes, setNodes] = useState([]);
    const [expandedNodes, setExpandedNodes] = useState({});

    useEffect(() => {
        const fetchData = async () => {
            const data = await fetchTreeData();
            setNodes(data);
        };
        fetchData();
    }, []);

    const toggleNode = (nodeId) => {
        setExpandedNodes((prevExpanded) => ({
           ...prevExpanded,
            [nodeId]:!prevExpanded[nodeId]
        }));
    };

    const memoizedNodes = useMemo(() => nodes, [nodes]);

    return (
        <div className="tree-menu">
            {memoizedNodes.map((node) => (
                <TreeNode
                    key={node.id}
                    node={node}
                    expandedNodes={expandedNodes}
                    toggleNode={toggleNode}
                />
            ))}
        </div>
    );
};

export default TreeMenu;

引入并使用该组件的步骤

1. 创建项目

如果你还没有 React 项目，可以使用 create - react - app 来创建一个新的项目：

npx create-react-app my-tree-menu-app
cd my-tree-menu-app
2. 安装依赖

该组件依赖 react-spring 来实现动画效果，需要安装它：

npm install react-spring
3. 复制代码

将上述 TreeMenu.jsx 和 TreeMenu.css 文件的代码分别复制到你的项目的 src 目录下。

4. 引入并使用组件

在 src/App.js 文件中引入并使用 TreeMenu 组件：

import React from 'react';
import TreeMenu from './TreeMenu';
import './TreeMenu.css';

function App() {
    return (
        <div className="App">
            <h1>可折叠树状菜单</h1>
            <TreeMenu />
        </div>
    );
}

export default App;
5. 运行项目

在终端中运行以下命令启动项目：

npm start

现在，你就可以在浏览器中看到一个带有模拟数据请求、数据更新、性能优化的可折叠树状菜单组件了。该组件支持多级菜单和节点展开/折叠状态管理，并且有相应的样式。

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端布洛芬

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值