react函数组件生命周期
时间: 2023-06-20 19:07:46 浏览: 62
在 React 函数组件中,有两个主要的生命周期函数:
1. `useEffect`
`useEffect` 可以看作是 `componentDidMount`、`componentDidUpdate` 和 `componentWillUnmount` 这三个生命周期函数的结合。
`useEffect` 接收一个函数作为参数,这个函数会在组件挂载后执行,也会在组件更新时执行(除非你传入了第二个参数并且这个参数的值没有变化)。如果这个函数返回了一个函数,则这个返回的函数会在组件卸载时执行。
例如:
```jsx
import { useEffect } from 'react';
function MyComponent(props) {
useEffect(() => {
console.log('组件挂载后执行');
return () => {
console.log('组件卸载时执行');
};
}, [props.someProp]);
useEffect(() => {
console.log('组件挂载后执行');
return () => {
console.log('组件卸载时执行');
};
}, []);
// ...
}
```
上面的代码中,第一个 `useEffect` 会在组件挂载后执行,也会在 `props.someProp` 的值发生变化时执行清理函数;第二个 `useEffect` 会在组件挂载后执行,但不会对任何 props 进行监听,因此它只会在组件挂载时执行一次。
2. `useState`
`useState` 是一个 Hook,用于在函数组件中添加状态(state)。
使用 `useState` 可以声明一个状态变量和一个更新函数,例如:
```jsx
import { useState } from 'react';
function MyComponent(props) {
const [count, setCount] = useState(0);
return (
<div>
<p>你点击了 {count} 次</p>
<button onClick={() => setCount(count + 1)}>点击我</button>
</div>
);
}
```
上面的代码中,我们使用 `useState` 声明了一个状态变量 `count` 和一个更新函数 `setCount`,并将 `count` 的初始值设为 0。在组件渲染时,我们可以使用 `count` 来渲染一个按钮和一段文字,当用户点击按钮时,我们可以使用 `setCount` 来更新 `count` 的值。由于 `count` 的值发生变化,因此 React 会重新渲染组件。
除了 `useEffect` 和 `useState`,还有一些其他的 Hook 可以用于函数组件的生命周期管理,例如 `useContext`、`useReducer`、`useCallback` 等等。这些 Hook 的使用方法和作用可以参考 React 文档。