React之组件state的正确打开方式

前端之家收集整理的这篇文章主要介绍了React之组件state的正确打开方式前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

setState是改变React组件中state值的唯一方法,不能直接对state赋值:

class Dog extends Component {
    constructor(props) {
        super(props)
        this.state = {
            color: 'white',age: 7,son: {
              color: 'gray',age: 1
            }
        }
    }
    
    brushHair() {
      //right
      setState({color: 'black'})
      
      //wrong
      this.state.color = 'black';
    }
}

state的更新可能是异步的,不要依赖当前state的值去计算下一个state

addAge() {
    //wrong
    setState({age: ++this.state.age})
}

正确的写法是使用setState的另一种用法,即参数可以是一个函数

addAge() {
    setState((prevState,props) => ({
        age: ++prevState.age
    }))
}

当更新state的部分属性时,其他属性是不会受影响的,但仅限于第一层结构

brushSonHair() {
    setState({
        son: {
            color: 'black'
        }
    })
}

上面的方法中setState改变的时第二层的属性值(son中的color),第一层的属性值(color age)不会受到影响,但son中的age属性就会丢失(可以理解为改变了son)。

猜你在找的React相关文章