react中回调函数
时间: 2024-06-15 17:01:20 浏览: 9
在React中,回调函数是一种常见的处理组件交互的方式,特别是当事件处理、数据请求或者异步操作需要等待完成后执行特定逻辑时。回调函数通常在以下几个场景中使用:
1. **事件处理**:比如`onClick`、`onChange`这样的属性,函数会在对应的DOM元素触发事件时被调用。
```jsx
<button onClick={() => console.log('Button clicked')}>Click me</button>
```
2. **生命周期方法**:如`componentDidMount`和`componentDidUpdate`,在组件挂载或更新后执行,这些也是回调函数。
```jsx
class MyComponent extends React.Component {
componentDidMount() {
fetchData(() => {
// 数据加载完成后的回调
});
}
}
function fetchData(callback) {
// 异步请求数据
}
```
3. **处理函数式组件的副作用**:在函数组件中,可以使用`useEffect` hook 来在特定时机执行回调。
```jsx
const MyFunctionComponent = ({ data }) => {
useEffect(() => {
// 数据变化后的清理操作或数据获取
}, [data]);
};
```
4. **异步操作**:在`async/await`或者`Promise`的处理中,使用回调函数来处理结果。
```jsx
async function getData() {
const response = await fetch('api/data');
return response.json();
}
getData().then(data => handleDataReceived(data));
```