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)。

原文地址：https://www.jb51.cc/react/303609.html