更新時間: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)的常用方式。
【AI設(shè)計】北京143期畢業(yè)僅36天,全員拿下高薪offer!黑馬AI設(shè)計連續(xù)6期100%高薪就業(yè)
2025-09-19【跨境電商運(yùn)營】深圳跨境電商運(yùn)營畢業(yè)22個工作日,就業(yè)率91%+,最高薪資達(dá)13500元
2025-09-19【AI運(yùn)維】鄭州運(yùn)維1期就業(yè)班,畢業(yè)14個工作日,班級93%同學(xué)已拿到Offer, 一線均薪資 1W+
2025-09-19【AI鴻蒙開發(fā)】上海校區(qū)AI鴻蒙開發(fā)4期5期,距離畢業(yè)21天,就業(yè)率91%,平均薪資14046元
2025-09-19【AI大模型開發(fā)-Python】畢業(yè)33個工作日,就業(yè)率已達(dá)到94.55%,班均薪資20763元
2025-09-19【AI智能應(yīng)用開發(fā)-Java】畢業(yè)當(dāng)天offer率91%,薪資1W+占比54.2%,班級均薪12k+
2025-09-19