不要再用useState控制组件的样式了?

上代码

使用useState控制fontSize

function TitleB({ title }) {
    const [size, setSize] = useState(24);
    const titleRef = useRef(null);
    useEffect(() => {
      const dom = titleRef.current;
      if (dom.clientHeight > 34) {
        setSize(size - 1);
      }
    }, [size]);
    console.log(['render B time:', indexB++].join(' '))
    return <div ref={titleRef} style={{ fontSize: `${size}px` }} className="title">B: {title}</div>;
  }

直接操作dom控制fontSize

function TitleA({ title }) {
    const titleRef = useRef(null);
    useEffect(() => {
      const dom = titleRef.current;
      let height = dom.clientHeight;
      let i = 1;
      while(height > 34) {
        i++;
        dom.style.fontSize = `${24 - i}px`;
        height = dom.clientHeight;
      }
    }, []);
    console.log(['render A time:', indexA++].join(' '))
    return <div ref={titleRef} className="title">A: {title}</div>;
  }

看效果

说结论

• 使用useState时,值的改变会导致组件(及其子组件)触发render
• 操作dom元素可避免react组件的重新render

ps:有种本该如此的感觉,也或者大可不必,可自行判断