当前位置：首页 > news >正文

关于React17的setState

news 2025/7/23 22:11:19

不可变值

state必须在构造函数中定义
在setState之前不能修改state的值，不要直接修改state,使用不可变值

可能是异步更新

直接使用时异步的

this.setState({count: this.state.count + 1
}, () => {console.log('count by callback', this.state.count) // 回调函数
})
console.log('count', this.state.count) // 异步的，拿不到最新值

在setTimeout中setState是同步的

setTimeout(() => {this.setState({count: this.state.count + 1})console.log('count', this.state.count) // 在settimeout中打印值正确
}, 0)

自己定义的DOM事件，setState是同步的

clickHandler = () => {this.setState({count: this.state.count + 1})console.log('count in body event', this.state.count);
}
componentDidMount() {document.body.addEventListener('click', this.clickHandler)
}componentWillUnmount() {document.body.removeEventListener('click', this.clickHandler)
}

可能被合并

如下例子

直接使用 - 传入对象会合并

this.setState({count: this.state.count + 1
})
this.setState({count: this.state.count + 1
})
this.setState({count: this.state.count + 1
})console.log(this.state.count) // 1

传入函数 - 函数不能被合并

this.setState((prevState, props) => {return {count: prevState.count + 1}
})
this.setState((prevState, props) => {return {count: prevState.count + 1}
})
this.setState((prevState, props) => {return {count: prevState.count + 1}
})
console.log(this.state.count) // 3