useEffect

渲染后触发的副作用

useEffect(()=>{
  // code
  return ()=>{
    // clean up
  }
}, [/*依赖数组*/])

提一嘴依赖数组

• 不加依赖数组：组件装载和组件状态时都会触发
• 加了依赖：只有依赖状态变动时的才会触发
• 空[]：装载时执行一次

useLayoutEffect

类似于 useEffect，但在所有 DOM 变更之后同步调用。

import React, { useLayoutEffect, useRef } from 'react';

function LayoutEffectExample() {
  // 创建ref用于访问DOM元素
  const ref = useRef(null);
  
  // useLayoutEffect会在DOM更新后同步执行
  useLayoutEffect(() => {
    console.log('useLayoutEffect 执行');
    // 修改DOM元素样式
    if (ref.current) {
      ref.current.style.backgroundColor = 'yellow';
    }
  }); // 注意：此处没有依赖数组，会在每次渲染后执行
  
  return <div ref={ref}>Layout Effect</div>;
}

export default LayoutEffectExample;

useInsertionEffect（Css-in-Js）

🐕都不用