useEffect

useEffect 是 React 中的一个 Hook，允许你在函数组件中执行副作用操作。副作用（Side Effects）是指组件中不直接涉及渲染过程的行为，例如数据获取、事件监听、订阅、设置定时器、手动修改 DOM 等。

基本用法：

useEffect(() => {// 执行副作用操作// 可以是数据获取、订阅等操作return () => {// 可选的清理操作，清理副作用};
}, [dependencies]);

不设置依赖

useEffect(()=>{//获取最新的状态值
})

• 第一次渲染完成后，执行callback，等价于 componentDidMount
• 在组件每一次更新完毕后，也会执行callback，等价于 componentDidUpdate
  下面的写法可以获取到最新的状态值

const Demo = function Demo() {let [num, setNum] = useState(0),[x, setX] = useState(100);useEffect(() => {// 获取最新的状态值console.log('@1', num);});const handle = () => {setNum(num + 1);};return <div className="demo"><span className="num">{num}</span><Button type="primary"size="small"onClick={handle}>新增</Button></div>;
};

设置空数组，无依赖

useEffect(()=>{  },[])

只有第一次渲染完毕后，才会执行callback，每一次视图更新完毕后，callback不再执行，「类似于componentDidMount」

初次渲染，打印@1 @2 ，点击按钮之后，只打印出@1

const Demo = function Demo() {let [num, setNum] = useState(0),[x, setX] = useState(100);useEffect(() => {// 获取最新的状态值console.log('@1', num);});useEffect(() => {console.log('@2', num);}, []);const handle = () => {setNum(num + 1);};return <div className="demo"><span className="num">{num}</span><Button type="primary"size="small"onClick={handle}>新增</Button></div>;
};

设置多个依赖

useEffect(() => {}, [依赖项1，依赖项2，依赖项3]);

• 第一次渲染完毕会执行callback
• 依赖的状态值（或者多个依赖状态中的一个）发生变化，也会出发callback执行
• 但是依赖的状态如果没有变化，在组件更新的时候，callback是不会执行

const Demo = function Demo() {let [num, setNum] = useState(0),[x, setX] = useState(100);useEffect(() => {console.log('@3', num);}, [num]);const handle = () => {setNum(num + 1);};return <div className="demo"><span className="num">{num}</span><Button type="primary"size="small"onClick={handle}>新增</Button></div>;
};

返回值是一个函数

useEffect(()=>{ return ()=>{ 
//获取的是上一次状态的值
//返回的函数，会在组件释放的时候执行
} } )

• 初始渲染之后返回一个小函数，放到链表当中
• 如果组件更新，会通过updateEffect会把上一次返回的函数执行「可以“理解为”上一次渲染的组件释放了」

const Demo = function Demo() {let [num, setNum] = useState(0),[x, setX] = useState(100);useEffect(() => {return () => {// 获取的是上一次的状态值console.log('@4', num);};});const handle = () => {setNum(num + 1);};return <div className="demo"><span className="num">{num}</span><Button type="primary"size="small"onClick={handle}>新增</Button></div>;
};

总结

useEffect的使用环境

useEffect必须是在函数的最外层上下文中调用，不能把其嵌入到条件判断、循环等操作语句中。
下面是错误的写法：

const Demo = function Demo() {let [num, setNum] = useState(0);if (num > 5) {useEffect(() => {console.log('OK');});}const handle = () => {setNum(num + 1);};return <div className="demo"><span className="num">{num}</span><Button type="primary"size="small"onClick={handle}>新增</Button></div>;
};

正确的应该是这样，把逻辑写在useEffect内部：

  useEffect(() => {if (num > 5) {console.log('OK');}}, [num]);

useEffect 中发送请求

首先模拟一个请求

// 模拟从服务器异步获取数据
const queryData = () => {return new Promise(resolve => {setTimeout(() => {resolve([10, 20, 30]);}, 1000);});
};

错误示例

这样写会直接进行报错。useEffect如果设置返回值，则返回值必须是一个函数「代表组件销毁时触发」；下面案例中，callback经过async的修饰，返回的是一个promise实例，不符合要求，所以报错！

useEffect(async ()=>{let data = await queryData();console.log(”成功“,data)
},[])

用.then获取数据

直接调用queryData，通过.then获取数据

useEffect(async ()=>{queryData().then(data=>{console.log(”成功“,data)})
},[])

在useEffect创建一个函数

在useEffect返回值里创建一个函数并调用

useEffect( ()=>{const next = async()=>{let data = await queryData();console.log(”成功“,data)};next();
},[])

总结

useLayoutEffect

useLayoutEffect 和 useEffect 具有相似的 API 和用法，但它们的执行时机不同。useLayoutEffect 是 同步执行 的，它会在浏览器 绘制（paint）之前 执行副作用操作。

基本用法：

useLayoutEffect(() => {// 执行副作用操作，特别是需要与 DOM 布局相关的操作return () => {// 可选的清理操作};
}, [dependencies]);

useLayoutEffect 和useEffect区别

useLayoutEffect 会阻塞浏览器渲染真实DOM，优先执行Effect链表中的callback;
useEffect不会阻塞浏览器渲染真实DOM，在渲染真实DOM的同时，去执行Effect链表中的callback;

• useLayoutEffect设置的callback要优先于useEffect去执行
• 在两者设置的callback中，依然可以获取DOM元素「因为这是的DOM对象已经创建了，区别只是浏览器是否渲染」
• 如果在callback函数中又修改了状态值「视图又要更新」
  • useEffect：浏览器肯定是把第一次的真实DOM已经绘制，再去渲染第二次的真实DOM
  • useLayoutEffect：浏览器是把两次真实DOM的渲染，合并在一起渲染

视图更新的步骤
1、基于babel-preset-react-app把JSX便衣乘createElement`格式

2、把createElement执行，创建virtualDOM

3、基于root.render方法把virtual变为真实DOM对象「DOM- DIFF」
useLayoutEffect 阻塞第4步操作，先去执行Effect链表中的方法「同步操作」
useEffect第4步操作和Effect链表中的方法执行，是同时进行的「异步操作」

4、浏览器渲染和绘制真实DOM对象

下面先打印出useLayoutEffect，再打印出useEffect

const Demo = function Demo() {// console.log('RENDER');let [num, setNum] = useState(0);useLayoutEffect(() => {console.log('useLayoutEffect'); //第一个输出}, [num]);useEffect(() => {console.log('useEffect'); //第二个输出}, [num]);return <div className="demo"style={{backgroundColor: num === 0 ? 'red' : 'green'}}><span className="num">{num}</span><Button type="primary" size="small"onClick={() => {setNum(0);}}>新增</Button></div>;
};

执行时机：浏览器渲染的关系

useEffect：

useEffect 是 异步 执行的，它是在 React 更新完 DOM 后（即浏览器绘制之后）执行的。浏览器渲染通常分为几个阶段：

浏览器渲染：更新 DOM、进行布局计算、绘制页面等。

React 执行副作用（useEffect）：在页面渲染完成后，再去执行副作用。

这种顺序意味着 useEffect 中的副作用操作不会阻塞浏览器渲染。换句话说，React 在触发 useEffect 后，会立即开始浏览器的绘制过程，所以不会影响页面的视觉展示。

举个例子，如果你使用 useEffect 来发起 API 请求，React 会等到浏览器完成渲染后，再去发起请求，不会影响渲染速度。

useLayoutEffect：

useLayoutEffect 与 useEffect 的最大区别是它会 同步执行，并且会在 DOM 更新后但在浏览器渲染（绘制）之前执行。执行顺序如下：

React 更新虚拟 DOM 和 DOM：这一步会根据组件的变化更新页面结构。

useLayoutEffect 执行：同步执行副作用，这时 DOM 已经更新，但浏览器还没进行绘制。

浏览器绘制：完成页面渲染。

这意味着 useLayoutEffect 会 阻塞 渲染，直到它执行完成后，浏览器才会进行页面渲染。因此，如果 useLayoutEffect 中执行的操作非常耗时，可能会导致页面渲染延迟，影响用户体验。

对浏览器渲染的影响

useEffect 的影响：

异步执行：不会阻塞页面渲染，可以在渲染完成后执行副作用操作。

不会影响页面视觉：由于 useEffect 在浏览器渲染完成后才执行，它不会导致页面布局变化，也不会造成视觉闪烁。

性能优化：因为是异步执行的，所以浏览器渲染不会被卡住，页面的响应速度和流畅性得到保证。

useLayoutEffect 的影响：

同步执行：会在 DOM 更新后但在页面渲染之前立即执行副作用，阻塞浏览器的绘制过程。

可能影响性能：由于同步执行，浏览器渲染必须等待 useLayoutEffect 完成，如果副作用中有复杂的操作，可能会导致页面加载时间延迟或出现白屏现象。

影响布局计算：适合用于获取 DOM 元素的大小、位置等布局信息，因为它在页面渲染之前执行，你可以确保你拿到的是最新的、正确的布局信息。

使用场景

useEffect 的常见场景：

数据获取：例如从 API 获取数据，或者发起网络请求。

事件监听和取消订阅：如为组件添加事件监听器（例如 resize 或 scroll），并在组件卸载时移除它们。

定时器/计时器：设置定时任务（如 setInterval 或 setTimeout），并在组件卸载时清理。

更新状态：例如当某个副作用触发时更新组件状态，通常与 DOM 操作无关。

例如： 通过 useEffect 实现获取数据并更新状态：

useEffect(() => {fetchData().then(data => {setData(data);});
}, []); // 依赖空数组，表示只在组件挂载时执行

在组件中监听 resize 或 scroll 事件时，useEffect 是一个常见的选择。你可以在 useEffect 中添加事件监听器，并在组件卸载时清除这些监听器。

import React, { useState, useEffect } from 'react';function WindowResize() {const [windowWidth, setWindowWidth] = useState(window.innerWidth);useEffect(() => {// 定义事件处理函数const handleResize = () => {setWindowWidth(window.innerWidth); // 更新宽度状态};// 在组件挂载时添加事件监听器window.addEventListener('resize', handleResize);// 返回清理函数，在组件卸载时移除事件监听器return () => {window.removeEventListener('resize', handleResize);};}, []); // 空数组，表示只在组件挂载和卸载时执行return (<div><p>Window width: {windowWidth}px</p></div>);
}export default WindowResize;

使用定时器来执行某些定期操作，如每隔一定时间更新状态。

import React, { useState, useEffect } from 'react';function Timer() {const [seconds, setSeconds] = useState(0);useEffect(() => {// 创建定时器，每秒增加一次秒数const intervalId = setInterval(() => {setSeconds((prevSeconds) => prevSeconds + 1);}, 1000);// 清理函数，组件卸载时清除定时器return () => clearInterval(intervalId);}, []); // 空数组，表示只在组件挂载时设置定时器，卸载时清理return (<div><p>Seconds: {seconds}</p></div>);
}export default Timer;

副作用可能会触发状态更新，特别是在某些条件发生变化时，比如从 API 获取数据或处理输入事件等。useEffect 在 inputValue 改变时触发，设置一个 500 毫秒的延迟，用 setTimeout 更新 delayedValue。每次 inputValue 更新时，都会清理上一个定时器，避免旧的定时器执行。这样，delayedValue 会延迟显示输入框的值，实现了一个防抖的效果。

import React, { useState, useEffect } from 'react';function InputWithDelay() {const [inputValue, setInputValue] = useState('');const [delayedValue, setDelayedValue] = useState('');useEffect(() => {// 设置延迟更新的效果const timeoutId = setTimeout(() => {setDelayedValue(inputValue);}, 500); // 输入后 500ms 更新 delayedValue// 清理函数：在输入值变化时清除上一个 timeoutreturn () => clearTimeout(timeoutId);}, [inputValue]); // 依赖于 inputValue，每次输入值变化时都会触发return (<div><inputtype="text"value={inputValue}onChange={(e) => setInputValue(e.target.value)}placeholder="Type something..."/><p>Delayed value: {delayedValue}</p></div>);
}export default InputWithDelay;

useLayoutEffect 的常见场景：

DOM 操作：需要在页面渲染之前操作 DOM（比如滚动条位置、修改样式、元素大小调整等）。

获取布局信息：例如测量 DOM 元素的宽度、高度或位置，因为这些信息可能在浏览器绘制过程中发生变化，所以你必须在渲染之前获取。

修复布局闪烁：如果你需要在页面渲染之前进行 DOM 操作，否则会导致闪烁或视觉不一致。

例如： 使用 useLayoutEffect 获取 DOM 元素尺寸：

import React, { useState, useLayoutEffect, useRef } from 'react';function Component() {const [size, setSize] = useState({ width: 0, height: 0 });const divRef = useRef(null);useLayoutEffect(() => {const div = divRef.current;if (div) {const { width, height } = div.getBoundingClientRect();setSize({ width, height });}}, []); // 只在挂载时执行return (<div ref={divRef}>Width: {size.width}, Height: {size.height}</div>);
}

使用 useLayoutEffect 来确保在浏览器绘制页面之前，能获取到最新的 DOM 元素的尺寸。

性能对比

• useEffect 的性能优势：由于是异步执行，它不会阻塞浏览器的渲染过程。即使副作用中有较重的操作（如网络请求、设置定时器等），它们也会在浏览器渲染完成后执行，不会影响页面渲染速度。

• useLayoutEffect 的性能成本：由于它是同步执行，并且会阻塞浏览器绘制，可能会导致页面渲染的延迟，特别是在副作用操作比较复杂时（比如大量的 DOM 计算）。如果在 useLayoutEffect 中执行了复杂的逻辑，它可能会影响页面的响应速度，给用户带来不流畅的体验。