4.1setState(partialState,callback)
parrialState:object|function 用于产生与当前state合并的子集
callback:fucntion state更新之后被调用
4.2 对setState()的了解
直接修改state,不会重新渲染组件,而是应该使用setState()
//错误写法
this.state.comment = 'Hello'
//正确使用
this.setState({
comment:'Hello'
});
state的更新可能是异步的,出于性能的考虑,React可能会把多个setState()调用合并成一个调用。例如下面的log值和显示的counter
import React,{Component} from 'react'
export default class SetStatePage extends Component{
constructor(){
super();
this.state = {
counter:0
}
}
changeValue = v =>{
this.setState({
counter:this.state.counter+v
});
console.log(this.state.counter)
}
setCounter = () =>{
this.changeValue(1);
}
render(){
const {counter} = this.state
return (
<div>
<h3>SetStatePage</h3>
<button onClick={this.setCounter}>{counter}</button>
</div>
)
}
}
如果想要获取到最新状态值有以下方式:
1.在回调中获取状态值
import React,{Component} from 'react'
export default class SetStatePage extends Component{
constructor(){
super();
this.state = {
counter:0
}
}
changeValue = v =>{
this.setState(
{
counter:this.state.counter+v
},
()=>{
//在回调中获取状态值
console.log(this.state.counter)
}
)
}
setCounter = () =>{
this.changeValue(1);)
}
render(){
const {counter} = this.state
return (
<div>
<h3>SetStatePage</h3>
<button onClick={this.setCounter}>{counter}</button>
</div>
)
}
}
2.使用定时器:
import React,{Component} from 'react'
export default class SetStatePage extends Component{
constructor(){
super();
this.state = {
counter:0
}
}
changeValue = v =>{
this.setState({
counter:this.state.counter+v
},
console.log(this.state.counter);
}
setCounter = () =>{
//使用定时器变为同步的函数
setTimeout(()=>{
this.changeValue(1)
},0)
}
render(){
const {counter} = this.state
return (
<div>
<h3>SetStatePage</h3>
<button onClick={this.setCounter}>{counter}</button>
</div>
)
}
}
3.原生事件中修改状态
import React,{Component} from 'react'
export default class SetStatePage extends Component{
constructor(){
super();
this.state = {
counter:0
}
}
changeValue = v =>{
this.setState({
counter:this.state.counter+v
})
console.log(this.state.counter);
}
setCounter = () =>{
this.changeValue(1)
}
componentDidMount(){
document.getElementById("test").addEventListener('click',this.setCounter,false)
}
render(){
const {counter} = this.state
return (
<div>
<h3>SetStatePage</h3>
<button id="test" onClick={this.setCounter}>{counter}</button>
</div>
)
}
}
总结:这里的setState只有在合成事件和生命周期函数中是异步的,在原生事件和setTimeout都是同步的,这里的异步其实是批量更新。
state的更新会被合并
import React,{Component} from 'react'
export default class SetStatePage extends Component{
constructor(){
super();
this.state = {
counter:0
}
}
changeValue = v =>{
this.setState({
counter:this.state.counter+v
},
}
setCounter = () =>{
this.changeValue(1);
this.changeValue(2);
}
render(){
const {counter} = this.state
return (
<div>
<h3>SetStatePage</h3>
<button onClick={this.setCounter}>{counter}</button>
</div>
)
}
}
每次点击按钮,会增加2,如果想要链式更新state
import React,{Component} from 'react'
export default class SetStatePage extends Component{
constructor(props){
super(props);
this.state = {
counter:0
}
}
changeValue = v =>{
this.setState(state=>({
counter:state.counter +v
}))
}
setCounter = () =>{
this.changeValue(1);
this.changeValue(2);
}
render(){
const {counter} = this.state
return (
<div>
<h3>SetStatePage</h3>
<button onClick={this.setCounter}>{counter}</button>
</div>
)
}
}
代码下载地址:https://gitee.com/JingYaBei/my-app.git