精读React hooks（六）：useLayoutEffect解决了什么问题？

import React, { useEffect, useLayoutEffect, useState, useRef } from 'react';
 
function BoxComparison() {
  const [heightEffect, setHeightEffect] = useState(0);
  const [heightLayoutEffect, setHeightLayoutEffect] = useState(0);
  const refEffect = useRef(null);
  const refLayoutEffect = useRef(null);
 
  useEffect(() => {
    if (refEffect.current) {
      setHeightEffect(refEffect.current.offsetWidth);
    }
  }, []);
 
  useLayoutEffect(() => {
    if (refLayoutEffect.current) {
      setHeightLayoutEffect(refLayoutEffect.current.offsetWidth);
    }
  }, []);
 
  return (
    <div>
      <div>
        <h2>使用 useEffect</h2>
        <div ref={refEffect} style={{ width: '200px', height: '50px', background: 'lightgray' }}>这是一个方块</div>
        <div style={{ width: '100px', height: `${heightEffect}px`, background: 'red', marginTop: '10px' }}>红色方块</div>
      </div>
      
      <div style={{ marginTop: '30px' }}>
        <h2>使用 useLayoutEffect</h2>
        <div ref={refLayoutEffect} style={{ width: '200px', height: '50px', background: 'lightgray' }}>这是一个方块</div>
        <div style={{ width: '100px', height: `${heightLayoutEffect}px`, background: 'blue', marginTop: '10px' }}>蓝色方块</div>
      </div>
    </div>
  );
}
 
export default BoxComparison;

import React, { useLayoutEffect, useRef, useState } from "react";
import { createPortal } from "react-dom";
 
export default function HoverTooltip() {
  const containerRef = useRef(null);
 
  return (
    <div
      ref={containerRef}
      className="p-8 bg-gray-100 w-full rounded-xl mt-5 shadow-lg m-4 space-y-4 overflow-hidden"
    >
      <ButtonWithTooltip
        containerRef={containerRef}
        tooltipContent="This tooltip does not fit above the button. This is why it's displayed below instead!"
      >
        Hover over me (tooltip above)
      </ButtonWithTooltip>
      <ButtonWithTooltip
        containerRef={containerRef}
        tooltipContent="This tooltip fits above the button"
      >
        Hover over me (tooltip below)
      </ButtonWithTooltip>
      <ButtonWithTooltip
        containerRef={containerRef}
        tooltipContent="This tooltip fits above the button"
      >
        Hover over me (tooltip below)
      </ButtonWithTooltip>
    </div>
  );
}
 
const ButtonWithTooltip = ({ tooltipContent, containerRef, children }) => {
  const [targetRect, setTargetRect] = useState(null);
  const [containerRect, setContainerRect] = useState(null);
  const buttonRef = useRef(null);
 
  return (
    <div className="relative">
      <button
        ref={buttonRef}
        className="py-2 px-4 bg-blue-500 text-white rounded hover:bg-blue-600 active:bg-blue-700 focus:outline-none transition"
        onMouseEnter={() => {
          buttonRef.current &&
            setTargetRect(buttonRef.current.getBoundingClientRect());
          containerRef.current &&
            setContainerRect(containerRef.current.getBoundingClientRect());
        }}
        onMouseLeave={() => setTargetRect(null)}
      >
        {children}
      </button>
      {targetRect && containerRect && (
        <Tooltip targetRect={targetRect} containerRect={containerRect}>
          {tooltipContent}
        </Tooltip>
      )}
    </div>
  );
};
 
const Tooltip = ({ children, targetRect, containerRect }) => {
  const ref = useRef(null);
  const [tooltipHeight, setTooltipHeight] = useState(0);
 
  useLayoutEffect(() => {
    if (ref.current) {
      const { height } = ref.current.getBoundingClientRect();
      setTooltipHeight(height); // 设置高度
    }
  }, [children]);
 
  let tooltipX = targetRect.left;
  let tooltipY =
    targetRect.top - containerRect.top - tooltipHeight < 0
      ? targetRect.bottom
      : targetRect.top - tooltipHeight; // 计算位置
 
  return createPortal(
    <div
      ref={ref}
      className="absolute bg-gray-700 text-white py-1 px-2 rounded shadow-md"
      style={{
        left: `${tooltipX}px`,
        top: `${tooltipY}px`,
      }}
    >
      {children}
    </div>,
    document.body
  );
};