Question

考虑以下示例

class MyApp extends Component {
    counter = 0;
    state = {
        counter: 0
    };
    incrementCounter() {
        this.counter = this.counter + 1;
        this.setState({
            counter: this.state.counter + 1
        });
    }
    render() {
        return <div>
            <p>{this.counter} and {this.state.counter}</p>
            <button onClick={this.incrementCounter}>Increment</button>
        </div>
    }
}

当我单击按钮时，我看到this.counter和this.state.counter都显示了增加的值

我的问题是为什么我必须使用状态？尽管react能够重新呈现所有实例属性

counter = 0;
incrementCounter() {
    this.counter = this.counter + 1;
    this.setState({});
}

在上面的代码片段中，仅调用this.setState（{}）就可以了，那为什么我应该使用this.state属性存储组件状态？

Answer 1

state和instance properties有不同的用途。虽然使用空参数调用setState将导致呈现并反映更新后的实例属性，但是state可以用于更多功能，例如在shouldComponentUpdate中比较prevState和currentState以决定是否要渲染，或者在诸如componentDidUpdate之类的生命周期方法中比较，您可以在其中根据状态变化采取措施。

state是react用来满足特殊目的的特殊实例属性。同样在setState中，出于性能原因而对状态更新进行批处理，并且状态更新异步发生，这与类变量更新是同步发生的不同。一个类变量将没有这些功能。

此外，当您向组件提供类变量作为支持时，除非您自己创建变量的新实例，否则在子组件的生命周期方法中无法区分此类变量的更改。 React已经为您提供了state属性

Answer 2

两者都有不同的目的。经验法则是：

如果state涉及渲染或数据流，则使用other instance fields存储数据（即，如果其直接或间接用于渲染方法中）
如果在呈现或数据流中涉及值不，则使用{{1}}存储数据（以防止在数据更改时呈现），例如用于存储渲染方法中未使用的计时器ID。请参阅官方文档中的TimerID example以了解此有效情况。

如果某些值未用于呈现或数据流（例如计时器ID），则您没有使其处于状态。可以将这些值定义为组件实例

参考：https://reactjs.org/docs/react-component.html#state

React组件实例属性和状态属性之间有什么区别？

2 个答案: