status灯闪烁怎么办（state声明式）

时间2025-06-20 23:34:17分类IT科技浏览3654

导读：如何定义state...

如何定义state

在类组件中，在constructor()中使用this.state={}来定义

在函数组件中，自React(16.8)版本以后，使用useState()来定义。

function B (props) { // 定义state声明式变量 let [num, setNum] = useState(1) }

如何使用state

在类组件中，使用this.state访问声明式变量。在函数组件中，直接访问useState的结果。

如何修改state声明式变量

在类组件中，使用this.setState()方法来修改。

class A extends Component { constructor (props) { super(props) // 调用Component的构造函数 // 定义state this.state = { num: 1 } } this.setState(state=>({num: state.num + 1}), ()=> {console.log( this.state.num)}) } }

在函数组件中，使用useState()返回值的第二个参数（set*）方法来修改。

function B (props) { // 定义state声明式变量 let [num, setNum] = useState(1) const add = () => { console.log(1--- num, num) // 如果这里是React(V17)中，在合成事件中是异步的，如果在宏任务或 Promise.then()是同步的。 // 如果这里是React(18) ，无论在哪里都是异步的。 // useState()给的这种set*方法，是没有callback的。 // setNum(num + 1) setNum(num => num + 10) console.log(2--- num, num) } }

this.setStaate()的两种写法

this.setState({},callback)当我们修改state时，如果旧值与新值无关，建议使用这种写法。 this.setState((state)=>{},callback)当我们修改state时，如果旧值与新值有关，建议使用这种写法。

this.setState()的异步性

在React(v17/v16)中，this.setState()在合成事件（事件，生命周期中）是异步的；在宏任务、promise.then()中是同步的。

在React(v18)中，无论this.setState()在哪里都是异步的，这种特性，被称之为“并发模式 ” 。

this.setState()定为异步是为了性能优化。

this.setState()自动合并

在同一个函数域中，多个this.setState()会自动合并，以减少没必要的diff运算(协调运算)；自动合并的规则是一种浅合并。

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

展开全文READ MORE