React中鼠标hover父容器时避免Chart重渲染，仅显示按钮

问题描述 #

需要实现鼠标悬停在包含Chart的Col容器任意区域时显示操作按钮，但当前实现中，hover操作会持续触发Chart组件重渲染，不符合预期。尝试过将onMouseEnter/onMouseLeave移到按钮所在Row，无法实现全容器hover显示按钮；也试过React.memo，问题依旧。

当前代码：

<Col onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} style={{ position: 'relative'}} >
  <Row>
    {(isDivHovered) && ( <>
        <Col >
            <Button 
                block 
                className='py-1 button-label ' 
                onClick={() => open}
            />
        </Col>
        <Col >
            <Button 
                block 
                className='py-1 button-label ' 
                onClick={() => close}
            />
        </Col>
    </>
    )}
  </Row>
  <Row className="w-100">
    <Col className="col-12 col-xl-6 p-0">
        <chart
            data = {{
                labels: fruit, 
                datasets: [
                    {
                        label: fruits,
                        data: fruitData,
                        backgroundColor: tableColors
                    }
                ]
            }}
            options = {tableOptions}
        />
    </Col>
    <Col className='my-auto'>
        {fruitslabel}
    </Col>
  </Row>
</Col>

解决方案 #

方案1：缓存Chart的data和options，配合React.memo阻止不必要重渲染 #

问题核心是父组件重渲染时，传给Chart的data是在render内创建的新对象，即使内容未变，引用也会更新，导致React.memo失效。用useMemo缓存data和options，确保只有依赖项变化时才更新引用：

import { useMemo } from 'react';
import React from 'react';

// 用React.memo包裹Chart组件
const MemoizedChart = React.memo(chart);

function YourComponent() {
  // ...其他状态与逻辑

  // 缓存data对象，依赖项为fruit、fruitData、tableColors
  const chartData = useMemo(() => ({
    labels: fruit, 
    datasets: [
      {
        label: fruits,
        data: fruitData,
        backgroundColor: tableColors
      }
    ]
  }), [fruit, fruitData, tableColors]);

  // 若tableOptions为动态值，同样用useMemo缓存
  const memoizedTableOptions = useMemo(() => tableOptions, [/* tableOptions的依赖项 */]);

  const handleMouseEnter = () => setIsDivHovered(true);
  const handleMouseLeave = () => setIsDivHovered(false);

  return (
    <Col onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} style={{ position: 'relative'}} >
      <Row>
        {isDivHovered && (
          <>
            <Col>
              <Button block className='py-1 button-label ' onClick={open} />
            </Col>
            <Col>
              <Button block className='py-1 button-label ' onClick={close} />
            </Col>
          </>
        )}
      </Row>
      <Row className="w-100">
        <Col className="col-12 col-xl-6 p-0">
          <MemoizedChart data={chartData} options={memoizedTableOptions} />
        </Col>
        <Col className='my-auto'>
          {fruitslabel}
        </Col>
      </Row>
    </Col>
  );
}

方案2：用CSS实现Hover显示按钮，完全避免JS状态更新触发的重渲染 #

这是性能最优的方案，无需依赖React状态，直接通过CSS选择器控制按钮的显示隐藏：

<Col className="chart-container" style={{ position: 'relative'}} >
  <Row className="action-buttons">
    <Col>
      <Button block className='py-1 button-label ' onClick={open} />
    </Col>
    <Col>
      <Button block className='py-1 button-label ' onClick={close} />
    </Col>
  </Row>
  <Row className="w-100">
    <Col className="col-12 col-xl-6 p-0">
      <chart
        data={{
          labels: fruit, 
          datasets: [
            {
              label: fruits,
              data: fruitData,
              backgroundColor: tableColors
            }
          ]
        }}
        options={tableOptions}
      />
    </Col>
    <Col className='my-auto'>
      {fruitslabel}
    </Col>
  </Row>
</Col>

对应的CSS：

.chart-container .action-buttons {
  display: none;
}

.chart-container:hover .action-buttons {
  display: flex; /* 根据布局调整为block或其他值 */
}

该方案彻底规避了JS状态变化导致的组件重渲染，同时完美实现全容器hover显示按钮的需求。

方案3：禁用Chart的鼠标事件（仅适用于无需Chart交互的场景） #

如果Chart不需要响应鼠标操作（如tooltip、点击事件），可以给Chart容器添加pointer-events: none，阻止Chart捕获鼠标事件，避免hover事件被干扰：

<Col className="col-12 col-xl-6 p-0" style={{ pointerEvents: 'none' }}>
  <chart
    data={{ /* ... */ }}
    options={{ /* ... */ }}
  />
</Col>

注意：此操作会让Chart完全失去交互能力，仅适合纯展示的场景。

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