监测页面滚动，饼图会跟着刷新

React 原本想实现一个页面滚动到一定的高度就显示一个可以回到顶部的按钮。但是监测页面滚动之后，antd中的饼图Pie只要滚动页面，就会进行刷新。要怎么解决呢？

页面滚动监测：

img

饼图数据：

img

饼图页面显示：

img

回到顶部按钮：

img

使用React.memo()对图表组件进行包装，const MemoizedPie = React.memo(Pie);
没有用，怎么处理？

控制按钮的display属性试试。而不是动态插入或者移除按钮

img

您好，我是有问必答小助手，您的问题已经有小伙伴帮您解答，感谢您对有问必答的支持与关注！
PS：问答VIP年卡 【限时加赠：IT技术图书免费领】，了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632不知道你这个问题是否已经解决, 如果还没有解决的话:
  • 这篇博客: react 性能优化之：react.memo 有效阻止父组件更新带来的子组件也重新渲染的问题。中的 子组件 部分也许能够解决你的问题, 你可以仔细阅读以下内容或者直接跳转源博客中阅读:
    import React, { useState, useEffect } from 'react';
import eventEmmiter from '../config/tools';

function Test3(props) {
//下面这句执行就说明，子组件重新渲染了
	console.log('组件3  didupdata -----------');

	useEffect(() => {
		console.log('组件3  didmount -----------');
	}, []);
	return (
		<div style={{ backgroundColor: 'pink', width: '300px', height: '200px' }}>
			子组件3 ！！！
			<button
				onClick={() => {
					props.fa_callback();
				}}
			>
				点击执行父组件的方法
			</button>
		</div>
	);
}
//下面是重点！！！
export default React.memo(Test3);

    如图我在输入框里输入文字，inp_value变化了，但是组件3并没有重新render

    在这里插入图片描述
    下图是没使用 memo的情况

  • 以下回答来自chatgpt:

    我可以尝试使用Intersection Observer API来监测页面滚动，这样可以减少滚动事件的监听次数，从而也减少了饼图刷新的次数。

    饼图如果是作为一个组件引入到页面中的，可以尝试使用React.memo()或者PureComponent来包装该组件，确保只有数据发生变化时才会重新渲染组件。

    我在Card组件中使用了饼图作为内容展示。

    回到顶部按钮可以使用CSS样式设置为固定定位，并添加一个点击事件来回到页面顶部。

    代码实现如下：

    import React, { useEffect, useState, useRef } from "react";

const MyComponent = () => {
  const [showButton, setShowButton] = useState(false);

  const intersectionObserver = useRef(
    new window.IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            setShowButton(false);
          } else {
            setShowButton(true);
          }
        });
      },
      { threshold: 0.5 }
    )
  );

  useEffect(() => {
    const pieNode = document.querySelector(".pie-chart");
    intersectionObserver.current.observe(pieNode);
    return () => {
      intersectionObserver.current.unobserve(pieNode);
    };
  }, []);

  const handleScrollTop = () => {
    window.scrollTo({ top: 0, behavior: "smooth" });
  };

  return (
    <div>
      <Card>
        <PieChart className="pie-chart" data={apiData} />
        // Other components
      </Card>
      {showButton && (
        <button onClick={handleScrollTop} className="scroll-top-button">
          Scroll to Top
        </button>
      )}
    </div>
  );
};

export default MyComponent;

    其中，我使用了Intersection Observer API来监测是否滚动到了饼图所在的位置。如果滚动到了，就显示回到顶部按钮；如果滚动出了饼图的位置，就隐藏回到顶部按钮。通过这种方式，可以减少回调函数的调用次数，并且可以避免饼图频繁刷新的问题。

    同时，我还为回到顶部按钮添加了滚动到顶部的事件处理函数handleScrollTop，并使用CSS样式将该按钮设置为固定定位。


如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^