状态和道具是否可变？

Question

假设我有一个react组件 - 一个按钮 - 当我点击它时会增加一个值.

例如

var Component = React.createClass({
    getInitialState: function() {
        return {count: 0}
    },

    increment: function() {
        this.setState({count: this.state.count + 1})
    },

    render: function() {
        return (<button onClick={this.increment}>{this.state.count}</button>);
    }
})

React.render(<Component />, document.getElementById('react-container'));

国家是可变的!

我可以用道具做类似的事情

var Component = React.createClass({
    increment: function() {
        this.setProps({count: this.props.count + 1})
    },

    render: function() {
        return (<button onClick={this.increment}>{this.props.count}</button>);
    }
})

React.render(<Component count={0}/>, document.getElementById('react-container'));

国家是可变的!

我检查过的一些资源说道具是不可改变的,但是然后去做类似的事情setProps.不同的资源互相矛盾.这使我很难掌握状态和道具之间的区别.

道具是否可变？如果没有,为什么我可以改变它们？似乎改变道具不是好习惯,这是真的吗？如果是,为什么setProps存在？

Answer 1

this.props并且this.state 可以被改变,但这实际上只是JS中对象可变性的结果.

你this.setState改变当前状态的断言是错误的; 创建表示状态的新对象,并应用更改.

说实话,我甚至不知道它setProps存在,但它听起来像一个完整的反模式!道具的重点在于它们被传递给组件,强制执行单向数据流.如果组件可以更改自己的道具,则此流程会中断.

您应该真正的目标是尽可能多地将应用程序状态存储在顶层,即在商店中,而不是使用组件状态.如果所有的州都在一个地方,那么理由就更容易了.

Answer 2

setProps是React早期的遗留物，现在已经不推荐使用了很长时间了。没错，从组件内部更改prop不是一个好习惯-将其视为函数的参数。而不是变异道具，您应该：

• 使用回调道具来通知父母发生了某些事情-父母可以随后更改其拥有的数据，并通过道具将其传递回孩子。
• 像在第一个示例中一样使用组件状态。

这两种解决方案的共同点在于，一个组件拥有数据，而这是唯一允许修改数据的组件-通常被称为“单一真相”。以这种方式构造代码的好处在于，这意味着您不会陷入意粉代码缠结的麻烦之中，因为它们无法使谁在修改数据片段。