如何阻止ECharts树形图点击事件触发整个组件重渲染？

一、稳定ECharts组件的props引用，避免不必要重渲染 #

1. 用useCallback缓存点击事件处理函数
   你的onChartClick每次组件渲染都会重新创建，导致onEvents对象引用变化，触发ECharts组件重渲染。用useCallback固定函数引用：

   const onChartClick = useCallback((params) => {
     if (params.treePathInfo.length === 9) {
       setDrawerData(params);
     }
   }, []); // 无依赖则留空，若需依赖变量再添加
   

2. 用useMemo缓存事件配置对象
   同样，onEvents每次渲染都会生成新对象，用useMemo保持引用稳定：

   const onEvents = useMemo(() => ({
     click: onChartClick,
   }), [onChartClick]);
   

3. 用React.memo包裹自定义ECharts组件
   如果你的ECharts是封装的自定义组件，用React.memo做浅比较，仅当props真正变化时才重渲染：

   const EChartsTreeMap = React.memo(({ option, onEvents }) => {
     // 你的ECharts组件初始化逻辑
   });
   

二、直接操作ECharts实例修改样式，避免全量更新option #

过滤节点置灰时，不要重新生成整个option，而是通过ECharts实例API修改指定节点样式，这样不会触发组件重渲染，也不会丢失当前展开状态：

1. 用useRef保存ECharts实例：

   const chartRef = useRef(null);
   
   const onChartReady = (instance) => {
     chartRef.current = instance;
   };
   

2. 过滤时仅更新目标节点样式：

   const handleFilter = (filterCondition) => {
     const chart = chartRef.current;
     if (!chart) return;
   
     const rawData = chart.getOption().series[0].data;
     const updatedData = rawData.map(node => {
       if (!filterCondition(node)) {
         return { ...node, itemStyle: { color: '#ccc', opacity: 0.5 } };
       }
       return node;
     });
   
     // 只更新数据部分，不重绘整个图表
     chart.setOption({
       series: [{ data: updatedData }]
     });
   };
   

三、保存并恢复当前展开状态（全量更新option时用） #

如果必须更新整个option，提前保存当前展开的节点路径，更新后重新展开：

1. 监听expand事件保存路径：

   const expandedPath = useRef([]);
   
   const onChartExpand = useCallback((params) => {
     expandedPath.current = params.treePathInfo.map(item => item.name);
   }, []);
   
   // 更新事件配置，添加expand监听
   const onEvents = useMemo(() => ({
     click: onChartClick,
     expand: onChartExpand
   }), [onChartClick, onChartExpand]);
   

2. 更新option后恢复展开状态：

   const updateChartOption = (newOption) => {
     const chart = chartRef.current;
     if (!chart) return;
   
     chart.setOption(newOption);
     // 触发展开动作恢复之前的层级
     chart.dispatchAction({
       type: 'expandTree',
       seriesIndex: 0,
       expandPath: expandedPath.current
     });
   };
   

四、优化抽屉数据更新的连锁影响 #

你的useEffect监听drawerData并调用props.setDrawerData，若此操作引发父组件重渲染并传递新props，需：

• 父组件中用useCallback包裹setDrawerData函数，保持引用稳定；
• 确保当前组件接收的props仅在真正变化时触发重渲染。

内容的提问来源于stack exchange，提问作者damienc11