Vue&React在带状态属性上的处理

声明：带状态属性在Vue中指data，在React中指state

1.创建

Vue：

• Vue中创建一个带状态的属性，只需要在组件内部使用this.data=object就可以了，值得注意的是，如果不是根组件，最好在赋值给this.data时使用一个函数，那样可以防止多个组件共用一个data

this.data = function() {
    return {
        attr1 : attr1，
        //...
    }
}

React：

• React中创建一个带状态的属性，只要在构造函数中使用this.state=object就可以了，值得注意的是，直接对this.state的赋值只能被允许在构造函数中进行，其他地方应当使用this.setState方法

2.更新

Vue：

• Vue对data的更新只要简单的更新对应的属性就可以了，比如data中有一个属性为title，要更新它，只需要使用this.title=value就行了
• Vue对于属性的更新还提供了一个响应式编程式的功能——计算属性，关于它的内容请查阅计算属性

React：

• React中更新state必须要使用this.setState方法，该方法接受多种形式的参数，最简单的是直接返回要更新的state对象，比如this.setState({date : new Date()}),但是并不建议这么使用，建议使用一个箭头函数进行包裹，比如this.setState(() =>{return {date : new Date()};});
• 应当注意state的更新不是立即的，如果你的state依赖于props那么应当选择下列写法，详细内容请参阅State 的更新可能是异步的

this.setState((state, props) => ({
  counter: state.counter + props.increment
}));

• state的更新是会采取合并而不是覆盖的方式，所以你更新时只需要把变动的部分更新过去就可以了

参考文档：