Javascript 当我们可以调用setState（{}）来重新呈现页面时，为什么我们需要在组件的预定义状态对象中包含组件状态变量

在我所看到的所有react教程中，负责更改组件内容的变量都保存在状态对象中，并调用setState（）方法更新这些变量并重新呈现页面。从进一步的阅读来看，这个setState（）方法的唯一功能似乎是重新呈现页面

我的问题是，如果setState（）仅用于重新渲染，为什么不将状态保持为空，像通常那样将所有动态内容更改变量声明为类属性，并在需要重新渲染时调用this.setState（{}）。

那么，将变量保存在状态对象中有什么用呢？上述技术何时会失败？

示例而不是：

class Button1 extends Component {

constructor() {
    super();
    this.state = {
        counter: 0,
    };
}

incrementCounter = () => {
    this.setState({counter:this.state.counter+1,message:""})
};

render() {
    return (
        <div>
            <button onClick={()=>{this.incrementCounter()}}> Click </button>
            <p>{this.state.counter}</p>
        </div>
    );
}
}

class按钮1扩展组件{
构造函数（）{
超级（）；
此.state={
柜台:0,，
};
}
递增计数器=（）=>{
this.setState（{counter:this.state.counter+1，消息：“”）
};
render（）{
返回(
{this.incrementCounter（）}}>单击
{this.state.counter}

);
}
}

我可以做到：

class Button2 extends Component {

constructor() {
    super();
    this.counter=0;
}

refresh(){
    this.setState({});
}

incrementCounter = () => {
    this.counter+=1;
    this.refresh();
};

render() {
    return (
        <div>
            <button onClick={()=>{this.incrementCounter()}}> Click </button>
            <p>{this.counter}</p>
        </div>
    );
}
}

class按钮2扩展组件{
构造函数（）{
超级（）；
这个计数器=0；
}
刷新（）{
this.setState（{}）；
}
递增计数器=（）=>{
这个计数器+=1；
这个。刷新（）；
};
render（）{
返回(
{this.incrementCounter（）}}>单击
{this.counter}

);
}
}

---

我个人喜欢第二种方法？它的缺陷是什么？

您可以设置任何这样的常量变量，只是以后不能使用setState更改它们并重新启动组件。状态是指在组件生命周期内要更改的变量

调用setState不仅仅是重新呈现页面，如果它注意到屏幕上发生了需要重新呈现的更改，它会重新呈现，并重新呈现某些部分，这比不断重新呈现整个页面要有效得多。

简短的回答是肯定的！当需要一个新的状态变量时，只需设置state（）

但它是肮脏的，您可能会在组件中定义十种状态，过一段时间后，读取代码会变得越来越困难

最好的方法是在组件的根目录中定义一个

state={…}

，或者在构造函数中定义一个

this.state={…}

，并在那里初始化所有需要的状态变量

---

这样，无论组件有多大，您的代码都将易于阅读和维护。

如果您希望在同一个类中包含一个非动态变量，那该怎么办？让它存在吧。每当发生更改变量的事件时，我将调用setState（）方法。最重要的是，setState（）方法重新渲染整个虚拟DOM，而不受任何更改的影响。阅读react hooks，您可能会喜欢它是的，它只重新渲染更改的部分，但它在实际DOM上执行的部分渲染。默认情况下，当调用setState（）时，虚拟DOM总是完全重新呈现。关于这一点，有一个很好的答案-[link]（）