Javascript React中的handleClick函数如何检索以前的状态值？

这将按钮值从

true

切换到

false

除了此

handleClick

功能的工作原理外，我还了解这一点：

 handleClick() {
    this.setState(prevState => ({
      isToggleOn: !prevState.isToggleOn
    }));
  }

有人能把这一点分解一下，并简单地解释一下函数是如何检索

isToggleOn

bool值的吗

我知道我们不能直接使用

！
setState
中的.state.isToggleOn

，但是有人能简单地解释一下为什么对于新手来说，这个

handleClick

函数在这种情况下更可靠吗

这就是调用

handleClick

函数的地方：

render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );

render（）{
返回(
{this.state.isToggleOn？'ON'：'OFF'}
);

也许就在这上面

setState（）的第二个参数是一个可选的回调函数，它将在setState完成并重新呈现组件后执行。通常，我们建议对此类逻辑使用componentDidUpdate（）

本质上，您是在函数中获取状态的前一个实例，然后对状态进行更改并返回它。此新状态将被保存并导致组件重新呈现

如果您使用功能组件，您可以取消在此处传递回调，并可以执行以下操作：

function MyComponent() {
  const [on, setOn] = React.useState(false)

  return (
    <button onClick={() => setOn(!on)}>
      {on? 'ON' : 'OFF'}
    </button>
  );
}

函数MyComponent（）{
const[on，setOn]=React.useState（false）
返回(
setOn（！on）}>
{开？'on'：'OFF'}
);
}

从

设置状态

文档：

第一个参数是具有签名的更新程序函数：

state

是对应用更改时组件状态的引用

在您的示例中，

prevState

被重命名为

state

，它包含状态中的所有赋值，包括

istogleon

您也可以在

setState

函数中读取

this.state

。

prevState

模式用于传达这是旧/当前状态，即正在更改的状态

---

在本场景中，您实际上可以同时使用这两种方法，因为这非常简单，您可以从render函数调用setState。类内组件很难找到this

this.setState（{oldState:this.state.oldState}）

可能有问题的地方。 相反，如果您使用功能组件或挂钩，您会经常看到这个问题

JS不是面向对象的！ 要理解这一点，您必须首先考虑js不是一种面向对象的语言。React只是试图模拟它。基本上，当您更改一个状态时，包含它的类会再次被调用，试图只运行更改的代码。在您的情况下，当调用

handleClick

时，会触发

render

函数，因为状态已更改

说到这里，handleClick不仅仅是一个函数！它也是类的一个属性。React尝试了解是否应该根据这些函数使用的值“重新声明”这些函数

良好做法 在您编写的示例中，

isToggleOn:！prevState.isToggleOn

，该函数是独立的。它不需要类的任何其他属性（除了setState，它使用不同的模式），因此在状态更改后，react引擎不必再次设置函数

糟糕的做法（有时写起来容易多了） 相反，如果使用

isToggleOn:！this.state.istogleon

handleClick函数依赖于

this.state

，因此每次它更改时，react引擎都必须通过用

{istogleon:…}

替换

this.state

来“重新声明”函数

如何重现这种模式

函数myRandom（属性）{
//一类私有变量
设hiddenVar=Math.random（）；
返回属性（hiddenVar）；
}
//让我们假设这里的数学课是不可访问的，而myRandom是。
myRandom（（num）=>{
console.log（num）；//此ac
})

如果您需要根据您可以使用的上一个状态更改您的状态，

this.setState（prevState…

。

！prevState.isToggleOn

将在每次单击时在true和false之间切换值。这是否回答了您的问题？我认为我们不应该使用此。根据React文档，我不知道这一点，因为我不再使用类组件，并且假设React将处理此问题。我将更新答案到reflec不是吗

(state, props) => stateChange