更新時間:2023-05-29 來源:黑馬程序員 瀏覽量:
在最新版本的React中,useState和setState之間的區(qū)別并不是很明顯。useState是React 16.8引入的新特性,它提供了一種在函數(shù)組件中使用狀態(tài)的方式。而setState是React中Class組件中用于更新狀態(tài)的方法。
接下來筆者通過一段代碼,來說明一下useState和setState之間的區(qū)別:
import React, { useState } from 'react';
// 使用 useState 的函數(shù)組件
const FunctionalComponent = () => {
const [count, setCount] = useState(0);
const increment = () => {
setCount(count + 1);
};
return (
<div>
<p>Count: {count}</p>
<button onClick={increment}>Increment</button>
</div>
);
};
// 使用 setState 的 Class 組件
class ClassComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
increment() {
this.setState({ count: this.state.count + 1 });
}
render() {
return (
<div>
<p>Count: {this.state.count}</p>
<button onClick={() => this.increment()}>Increment</button>
</div>
);
}
}
// 在父組件中使用這兩個組件
const App = () => {
return (
<div>
<h2>Functional Component (useState)</h2>
<FunctionalComponent />
<h2>Class Component (setState)</h2>
<ClassComponent />
</div>
);
};
export default App;
在上面的例子中,FunctionalComponent使用了useState來定義狀態(tài)變量count以及更新該狀態(tài)的方法setCount。每次點擊"Increment"按鈕時,會調(diào)用setCount來更新count的值。
而ClassComponent則是一個Class組件,使用了setState來更新狀態(tài)。在increment方法中,調(diào)用this.setState來更新count的值。
總體而言,useState是函數(shù)組件中使用狀態(tài)的推薦方式,而setState則是Class組件中使用狀態(tài)的常用方式。