Question

在我见过的所有React教程中，负责更改组件内容的变量都保持在 state 对象中，调用 setState（）方法会更新这些变量变量并重新呈现页面。从进一步的阅读看来，此 setState（）方法的唯一功能是重新呈现页面

我的问题是，如果只是使用 setState（）进行重新渲染，为什么不只是保持 state 对象为空，而是像通常一样将所有动态内容更改变量声明为类属性并在要重新渲染时调用 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 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>
    );
}
}

我个人喜欢第二种方法吗？有什么陷阱？

Answer 1

调用setState不仅会重新渲染页面，还会注意到如果屏幕上发生了一些需要重新渲染的内容，并且重新渲染了某些部分，这会使它重新渲染，而不是仅仅不断重新渲染整个页面。

/ p>

Answer 2

简短的回答是！您只需在需要新的状态变量时设置setState（），

但是它很脏，您可能会在组件中定义十个状态，过一会儿，它将越来越难读取代码，

最好的方法是在组件的根目录中定义state={...}或在构造函数中定义this.state={...}，然后在其中初始化所有需要的状态变量。

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

Answer 3

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

为什么我们只需要调用setState（{}）来重新呈现页面

3 个答案: