react函数加了动画之后,是不是动画过程中每次dom的变化都是不断reRender的过程

import React, { useState, useRef, useEffect } from "react";
import ResizeObserver from "resize-observer-polyfill";

export function useMeasure() {
  const ref = useRef();
  const [bounds, set] = useState({ left: 0, top: 0, width: 0, height: 0 });
  const [ro] = useState(
    () => new ResizeObserver(([entry]) => set(entry.contentRect))
  );
  useEffect(() => {
    if (ref.current) ro.observe(ref.current);
    return () => ro.disconnect();
  }, []);
  return [{ ref }, bounds];
}

function App() {
  const [size, setSize] = useState(100);
  const Change = () => {
    setSize(300);
  };
  const [bind, { height: viewHeight }] = useMeasure();
  console.log(bind);
  return (
    <div
      style={{
        background: "blue",
        width: 200,
        height: size
        transition: "height 1s ease-out"
      }}
      {...bind}
      onClick={Change}
    />
  );
}

export default App;

加了 transition: "height 1s ease-out" 这条动画过渡属性后,有了动画,但是貌似这个函数组件也执行了很多次:
image.png

如图,console.log(bind);这条语句执行很多次,意味着这个函数组件也执行了这么多次,去掉这个动画后,就变成了正常的两次?

求解?这是react的正常表现?还是说有问题的吧?有问题的话,原因?怎么优化呢?

待解决 悬赏分:70 - 离问题结束还有 504天4小时27分14秒
反对 0举报 0 收藏 0

我来回答

回答1