React setState仔细再看

124 阅读1分钟

官方文档

  1. setState(updater[, callback]) updater就是一个函数,不包括()调用哦,就是一个reference。

  2. updater如下:The first argument is an updater function with the signature:(state, props) => stateChange

const updater = (prevState, prevProps)=>{
     return {counter: prevState.counter + prevProps.step};
}

即:

const updater = (prevState,prevProps) => ({counter: prevState.counter + prevProps.step}) 
//注意:这里是()不是{},ES6 shorthand格式,为了区分code block。

即:

this.setState(
 (prevState, prevProps)=>{
     return {counter: prevState.counter + prevProps.step};
   }
)
this.setState( 
(prevState, prevProps)=>
( {counter: prevState.counter + prevProps.step};)
)

以上写法,无法等价于直接去掉prevState参数,但是为何React又可以这么写呢?因为这是React自己的定义而已。他在setState里面处理了,而不是自然过渡的。看下面官网截图。

this.setState(
         {counter: prevState.counter + prevProps.step};
)

区别是如果用updater 函数的话,更新render是立即更新的。facebook的人说,如果state是基于上一个prevState的话,为确保更新,反而推荐!