React中的state

组件局部状态 state

是组件内部维护的一组用于反映组件UI变化的状态集合。

class Welcome extends React.Component{
    constructor(props){
        super(props);
        this.state={}
    }
}

state特点

1. 不可直接修改state
   需要调用this.setState()方法进行修改
2. state的更新是异步的
3. state的更新是一个浅合并的过程
   只需要传入需要修改的数据即可完成修改，state中未被修改的数据不会改变

---

• state 和 props 主要的区别在于 props 是不可变的，而 state 可以根据与用户交互来改变。容器组件需要定义 state 来更新和修改数据。 而子组件只能通过 props 来传递数据。

---

使用this.setState()修改时状态类型

React官方建议把State当作是不可变对象，一方面是如果直接修改this.state，组件并不会重新render；另一方面State中包含的所有状态都应该是不可变对象。当State中的某个状态发生变化，我们应该重新创建这个状态对象，而不是直接修改原来的状态。那么，当状态发生变化时，如何创建新的状态呢？根据状态的类型，可以分成三种情况：

1. 状态的类型是不可变类型(数组，字符串，布尔值，null，undefined)
   直接赋新值
2. 状态类型是数组
   通过concat方法或者ES6数组扩展方法

//ES6数组解构赋值
arr: [...this.state.arr, 3]
//concat方法
arr: this.state.arr.concat([3])

注意不要使用push、pop、shift、unshift、splice等方法修改数组类型的状态，因为这些方法都是在原数组的基础上修改，而concat、slice、filter会返回一个新的数组。

3. 状态类型是普通对象
   通过Object.assign()方法或者对象扩展语法

obj: Object.assign({}, this.state.obj, {name:'tom'})
obj:{...this.state.obj,name:'tom'}

---