【React】useEffect的使用场景与作用

news/2024/10/11 1:28:26/

useEffect 是 React 中的一个 Hook，用于在函数组件中执行副作用。副作用是指那些与渲染过程无关的操作，比如数据获取、订阅事件、手动操作 DOM、日志记录等。useEffect 允许你在函数组件中引入这些副作用，而不必依赖于类组件的生命周期方法（如 componentDidMount、componentDidUpdate 和 componentWillUnmount）。

useEffect 的使用场景和作用：

数据获取（Fetching Data）：

1.当组件加载时，通过 API 请求获取数据。

示例：

javascript">useEffect(() => {fetch('https://api.example.com/data').then(response => response.json()).then(data => setData(data));
}, []); // 空依赖数组表示只在组件挂载时执行

2.订阅和取消订阅（Subscriptions）：

你可以在组件挂载时订阅某些事件，并在组件卸载时取消订阅。
示例：

javascript">useEffect(() => {const handleResize = () => console.log('Window resized');window.addEventListener('resize', handleResize);return () => window.removeEventListener('resize', handleResize); // 清除副作用
}, []); // 空依赖数组表示只在组件挂载和卸载时执行

3.DOM 操作：

当你需要手动操作 DOM 元素时，可以使用 useEffect。
示例：

javascript">useEffect(() => {document.title = `You clicked ${count} times`;
}, [count]); // 依赖于 count，每次 count 改变时执行

4.清除副作用（Cleanup Effects）：

在组件卸载或副作用更新之前清除副作用，以避免内存泄漏或不必要的操作。
例如：清除定时器、取消网络请求或移除事件监听器。
示例:

javascript">useEffect(() => {const timer = setTimeout(() => {console.log('This will run after 1 second');}, 1000);return () => clearTimeout(timer); // 在组件卸载时清除定时器
}, []); // 依赖数组为空，只在组件挂载和卸载时执行

useEffect 的依赖数组：

useEffect 接受两个参数：一个副作用函数和一个可选的依赖数组。
副作用函数：在组件渲染后执行。这个函数可以返回一个清除副作用的函数。

依赖数组：定义副作用何时重新执行。只有当数组中的依赖项发生变化时，副作用函数才会执行。

空数组 []：仅在组件挂载和卸载时执行副作用。

无数组：每次组件重新渲染时都会执行副作用。

带有依赖项的数组：当依赖项发生变化时才会重新执行副作用。

javascript">useEffect(() => {// 这段代码在组件挂载后运行console.log('Component mounted');// 返回的函数将在组件卸载时运行return () => {console.log('Component unmounted');};
}, []); // 空依赖数组意味着只在挂载和卸载时执行