react 函数里如何重新渲染组件
时间: 2023-11-28 17:48:51 浏览: 34
在 React 函数组件中重新渲染组件有两种方式:
1. 使用 `setState` 方法
在 React 中,组件的状态存储在 `state` 中。我们可以使用 `setState` 方法来更新组件的状态,并触发组件的重新渲染。
例如:
```jsx
import React, { useState } from 'react';
function MyComponent() {
const [count, setCount] = useState(0);
const handleClick = () => {
setCount(count + 1); // 更新 count 的值
};
return (
<div>
<p>Count: {count}</p>
<button onClick={handleClick}>Add 1</button>
</div>
);
}
```
在上面的例子中,当用户点击按钮时,`handleClick` 函数会调用 `setCount` 方法来更新 `count` 值。由于 `count` 值发生了变化,React 会重新渲染组件,并显示更新后的 `count` 值。
2. 使用 `forceUpdate` 方法
`forceUpdate` 方法可以强制组件重新渲染。但是,它不会更新组件的状态。因此,只有在组件的状态无法更新时才应该使用这个方法。
例如:
```jsx
import React, { useState } from 'react';
function MyComponent() {
const [count, setCount] = useState(0);
const handleClick = () => {
setCount(count + 1); // 更新 count 的值
};
const handleForceUpdate = () => {
forceUpdate(); // 强制重新渲染组件
};
return (
<div>
<p>Count: {count}</p>
<button onClick={handleClick}>Add 1</button>
<button onClick={handleForceUpdate}>Force Update</button>
</div>
);
}
```
在上面的例子中,当用户点击“Force Update”按钮时,`handleForceUpdate` 函数会调用 `forceUpdate` 方法来强制重新渲染组件。由于 `count` 值没有发生变化,组件的状态不会更新,但是组件会被重新渲染。