state
是 react 组件自身的数据,具有“响应式”的特性(当 state 变量被 this.setState() 修改时,视图会自动更新!!!),render运行返回新的JSX,React背后会发生可中断的协调,和不可中断的提交的过程。
(1)什么是 state ?
state 是一个对象,里面可以存储各种类型的状态数据!!!
(2)使用 state
- 先定义!!!
- 然后通过 this.state 可以访问到所有的状态
- 通过 this.state.xxx 访问某个状态数据
(3)修改 state 的值
注意:
-
不要直接对 state 的值进行修改,即不要 this.state.num = 1 (哒咩)
-
要使用
this.setState()
进行间接的修改
this.setState({ } , callback):
该方法接收两个参数,第一个是修改过数据后的状态对象,第二个是状态修改过后会调用的 callback 函数!!!
(4) this.setState() 的异步性
- 如果
this.setState()
处在同步的逻辑中,就会异步更新状态,更新真实 DOM - 如果
this.setState()
处在异步的逻辑中(eg : Promise 、axios 、setTimeout() ),就会异步更新状态,更新真实 DOM
理解:
why this.setState() 要异步化? 因为开发在同一个合成事件中可能多次调用this.setState方法,如果,它是同步的话,这会导致多次render(),这显然是一种性能损耗。
所以在异步逻辑中,它本身就是异步的,并且React无法直接操控,所以在异步逻辑中,this.setState()
就会同步执行!!!
how to know setState() 异步执行完毕了?
- 在 this.setState( {} , ()=>{}) 的第二个参数:回调函数中知道,因为状态更新完毕后,会自行调用该回调函数
- 在生命周期中,当
componentDidUpdate()
生命周期被触发时,说明状态已经更新!!!
(5) this.setState 的自动浅合并
setState() 执行时,会有一个合并的标志位:
-
在同步逻辑中,标志位会被置为 true ,即允许合并,即覆盖 ,以最后一次的操作为准!!!
-
在异步逻辑中,标志位会被置为 false ,即不允许合并
上述为在同步逻辑中多次调用 setState() ,那么最后,每次点击 ,count的值加1 ,因为任务被合并覆盖了!!!