//8-1 setState()在setTimeout setInterval中是同步的
//8-2 setTimeout/setInterval不会合并=>不会批量更新
//8-3 setTimeout/setInterval没有依赖问题
//4.setState是异步的(条件2:在生命周期钩子函数中)
class App extends React.Component{
constructor(props){
super(props)
//状态初始化方法1
this.state = {}
}
//状态初始化方法2
state = { a:0,b:0,c:0 }
handleClick=>()=>{
console.log(this) //指向组件实例
//1.直接修改数据,强制刷新
this.state.a = 1
this.forceUpdate()
//2.setState():修改数据,触发render
this.setState({
a : 1
})
//3.setState是异步的(条件1:在合成事件里面)
//先执行输出this.state.a,再执行setState()
this.setState({
a : 1
})
console.log(this.state.a) //输出为0
//5.多次调用setState()
//3次调用setState=>render执行一次=>state数据全部修改(批量更新)
//react性能优化,setState不是立即执行的,合并执行
//批量更新的时机是在render之前的某个时候
this.setState({a:1})
this.setState({b:1})
this.setState({c:1})
console.log(this.setState) //{a:0,b:0,c:0}说明=>setState是异步的
//6.累加(存在依赖隐患)
//隐患:调用setState更新的值,依赖于state里面的数据;
//不能依赖于上一个状态去计算下一个状态
//a:1=>setState是异步的,不是立即执行的
this.setState({a:1})
this.setState({a:this.state.a + 1})
this.setState({a:this.state.a + 1}) // 累加结果为1
//因为异步 => 转换
this.setState({a:1})
this.setState({a:1})
this.setState({a:1})
//因为合并 => 转换
this.setState({a:1})
//输出仍然是0 异步问题,获取不到真实修改setState结果
console.log(this.state.a)
//增加参数,获取到真实结果
this.setState({a:this.state.a +1},()=>{
console.log("callback",this.state)
})
//7.setState接受一个函数,解决累加隐患
//函数参数:上一个状态preState,props;
//返回值:也是一个对象,也是新的状态,可以依赖于上一个状态做计算
this.setState({a:1}) //a:1
this.setState((preState,props)=>{
return {a:preState.a+1}
})
this.setState((preState,props)=>{
return {a:preState.a+1}
})
this.setState((preState,props)=>{
return {a:preState.a+1}
}) //点击:a:4 累加成功
//原理解析:将执行函数放在队列中执行
[
(preState,props)=>{ {a:preState.a+1} });
(preState,props)=>{ {a:preState.a+1} });
(preState,props)=>{ {a:preState.a+1} });
]
console.log(this.state.a) //输出仍然是0
this.setState((preState,props)=>({a:preState.a+1}),()=>{
console.log("callback",this.state.a)
//通过第二个参数,传递回调函数 获取state真实的值
})
//8.定时器/延时器
//8-1 setState()在setTimeout setInterval中是同步的
setTimeout(()=>{
console.log(this) //箭头函数=>指向handleClick作用域=>组件实例
this.setState({ a:1 })
console.log(this.setState.a) //打印:1,说明此处serState不是异步的
},1000)
setInteval(()=>{
console.log(this) //箭头函数=>指向handleClick作用域=>组件实例
this.setState({ a:1 })
console.log(this.setState.a) //打印:1,说明此处serState不是异步的
},1000)
//8-2 setTimeout/setInterval不会合并=>不会批量更新
setTimeout(()=>{
this.setState({a:1});
console.log(this.state.a)
this.setState({b:1});
console.log(this.state.b)
this.setState({c:1});
console.log(this.state.c)
},1000)
//8-3 setTimeout/setInterval没有依赖问题
setTimeout(()=>{
this.setState({a:1})
this.setState({a:this.state.a + 1})
this.setState({a:this.state.a + 1})
console.log(this.state.a)
})
}
//render必须实现
render(){
console.log("render")
//render函数中必须有return
return(
a:{this.state.a}
b:{this.state.b}
c:{this.state.c}
{/*合成事件(事件包装):onClick onChange(事件代理 委托)*/}
)
}
//第一次挂载完毕自动执行
componemtDidMount(){
console.log("componemtDidMount")
//4.setState是异步的(条件2:在生命周期钩子函数中)
this.setState({
a : 1
})
console.log(this.state.a) //输出为:0
}
}
ReactDOM.render(e,document.getElementById("app"))