react框架, useEffect 用法
useEffect
是React的一个Hook,它提供了在函数组件中执行副作用操作的能力。它相当于类组件中的componentDidMount
、componentDidUpdate
和componentWillUnmount
生命周期方法的组合。
以下是一些useEffect
的基本用法:
- 在组件挂载后执行:如果你想在组件挂载后执行某些操作(例如,获取数据),可以这样做:
import React, { useEffect } from 'react';
function MyComponent() {
useEffect(() => {
// 在这里执行你的副作用操作
console.log('Component mounted');
}, []); // 注意这个空数组,它表示这个effect只会在组件挂载后执行一次
return <div>Hello World</div>;
}
- 在某些值改变后执行:如果你想在某个prop或state改变后执行某些操作,可以这样做:
import React, { useEffect, useState } from 'react';
function MyComponent({ prop }) {
const [state, setState] = useState(0);
useEffect(() => {
// 在这里执行你的副作用操作
console.log('prop or state changed');
}, [prop, state]); // 这个effect会在prop或state改变后执行
return <div>Hello World</div>;
}
- 清理副作用:有时候,你可能需要在组件卸载前或在下次运行副作用函数之前执行一些清理操作(例如,清除计时器)。这可以通过返回一个函数来实现:
```
import React, { useEffect } from 'react';
function MyComponent() {
useEffect(() => {
const timer = setTimeout(() => {
console.log('This will run after 1 second');
}, 1000);
return () => {
clearTimeout(timer); // 在组件卸载前或在下次运行这个effect之前,清理计时器
};
}, []);
return
<
div>Hello