React useEffect的触发时机及其使用场景总结

React useEffect会在什么时候触发

useEffect 是 React 中的一个 Hook，用于在函数组件中处理副作用。它的触发时机取决于你如何使用它。以下是一些常见的触发时机：

1. 初次渲染时：当组件第一次渲染到 DOM 中时，useEffect 会被触发。

   useEffect(() => {
     // 这个代码块会在组件初次渲染时执行
   }, []);
   

2. 依赖项变化时：如果你在 useEffect 中传入了一个依赖项数组，当数组中的任何一个依赖项发生变化时，useEffect 会被触发。

   useEffect(() => {
     // 这个代码块会在 count 变化时执行
   }, [count]);
   

3. 每次渲染时：如果你没有传入依赖项数组，useEffect 会在每次组件渲染时都执行。

   useEffect(() => {
     // 这个代码块会在每次渲染时执行
   });
   

4. 清理副作用：如果 useEffect 返回一个函数，这个函数会在组件卸载时或者在下一次执行 useEffect 之前执行，用于清理副作用。

   useEffect(() => {
     // 这个代码块会在组件初次渲染和依赖项变化时执行
   
     return () => {
       // 这个代码块会在组件卸载时或依赖���变化前执行
     };
   }, [count]);
   

总结：

• useEffect 在组件初次渲染时触发。
• 如果传入了依赖项数组，则在依赖项变化时触发。
• 如果没有传入依赖项数组，则在每次渲染时触发。
• 返回的清理函数在组件卸载时或依赖项变化前触发。