React -- 状态 state

26 阅读2分钟

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 ,即不允许合并

1853.png

上述为在同步逻辑中多次调用 setState() ,那么最后,每次点击 ,count的值加1 ,因为任务被合并覆盖了!!!