关于react setState代码优化

无涯
  • 94
 if (type === 'a') {
     this.setState({ a });
 } else if (type === 'b') {
     this.setState({ b })
 } else if (type === 'c') {
     this.setState({ c })
 }

这段代码可以怎么优化一下。我感觉这样挺清晰的

回复
阅读 410
3 个回答

可以用查找表:

 const table = {
     a: a,
     b: b,
     c: c
 }
 if(table.hasOwnProperty(type)){
     this.setState({[type]: tbale[type]})
 }

这样做的好处是易于扩展和配置,但分支少的时候没啥优势。

如果没有 else 的话这是一种思路

this.setState({
  [type]:{a,b,c}[type]
})

添加容错:

const value = {a,b,c}[type]
if(value){
  this.setState({
    [type]:value
  })
}

超过2次的重复逻辑建议封装成函数

const TYPE_EFFECTIVE_LIST = ['a','b','c'] // 有效的type列表

/**
 * 根据 type 修改 state 
 * @param type 
 */
function changeStateByType(type) {
    if (TYPE_EFFECTIVE_LIST.includes(type)) {
        this.setState({[type]:type})
    }
}
// run 
changeStateByType('a')
已参与了 SegmentFault 思否「问答」打卡,欢迎正在阅读的你也加入。
你知道吗?

宣传栏