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

2020-05-12 本文已影响0人睦月MTK

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

Vue：

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

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

React：

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

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
}));

参考文档：