react Hook useEffect的基本使用及注解

本文主要是介绍react Hook useEffect的基本使用及注解，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一、概述

useEffect是React提供的一个Hook，用于在函数组件中执行副作用操作。副作用操作通常包括数据获取、订阅事件、手动操作DOM等。useEffect可以让我们在函数组件中模拟类组件的生命周期方法（如componentDidMount、componentDidUpdate、componentWillUnmount）。

二、useEffect的基本用法和常见场景

1、基本用法：

import React, { useEffect } from 'react';function MyComponent() {useEffect(() => {// 在组件渲染后执行副作用操作console.log('Component did mount');return () => {// 在组件卸载前执行清理操作console.log('Component will unmount');};}, []); // 第二个参数是依赖数组，当依赖发生变化时才会重新执行effectreturn <div>My Component</div>;
}

2、数据获取：

import React, { useState, useEffect } from 'react';function DataFetchingComponent() {const [data, setData] = useState(null);useEffect(() => {fetch('请求接口地址').then(response => response.json()).then(data => setData(data));}, []); // 只在组件挂载时获取数据return (<div>{data ? <p>{data}</p> : <p>Loading...</p>}</div>);
}

3、监听状态变化：

import React, { useState, useEffect } from 'react';function CounterComponent() {const [count, setCount] = useState(0);useEffect(() => {console.log('Count has changed:', count);}, [count]); // 监听count的变化，变化则useEffect重新执行return (<div><p>Count: {count}</p><button onClick={() => setCount(count + 1)}>Increment</button></div>);
}

4、清理副作用：

import React, { useEffect } from 'react';function TimerComponent() {useEffect(() => {const timer = setInterval(() => {console.log('Tick');}, 1000);return () => {clearInterval(timer); // 清除定时器};}, []); // 只在组件挂载时设置定时器return <div>Timer Component</div>;
}

通过useEffect，我们可以在函数组件中处理各种副作用操作。

这篇关于react Hook useEffect的基本使用及注解的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---