React 中的这个 handleClick function 如何检索之前的 state 值？

Question

此codepen将按钮值从true切换为false 。

除了这个handleClick function 是如何工作的之外，我理解这一点：

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

有人可以将其分解并简单地解释 function 如何检索isToggleOn布尔值吗？

我知道我们不能直接在setState中使用.this.state.isToggleOn但有人可以简单地解释一下为什么这个handleClick function 在这种情况下对于 React 新手来说更可靠吗？

这就是调用handleClick function 的地方：

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

Answer 1

从setState文档：

第一个参数是带有签名的更新程序 function：

(state, props) => stateChange

state是在应用更改时对组件 state 的引用。

在您的示例prevState是重命名的state ，它包含 state 中的所有分配，包括isToggleOn 。

您也可以在setState function 中阅读this.state 。 prevState模式用于传达这是旧的/当前的 state、正在更改的 state。

设置状态文档

Answer 2

在这种情况下，您实际上可以同时使用两者，因为它非常简单，您可以从渲染 function 调用 setState。 在 class 组件中很难找到this.setState({oldState:this.state.oldState})可能有问题的地方。 相反，如果你使用函数式组件或钩子，你会经常看到这个问题。

JS 不是面向 Object 的！

要理解这一点，您必须首先认为 js不是面向 object 的语言。 React 试图模拟它。 基本上，当您更改 state 时，包含它的 class 会再次被调用，试图仅运行更改的代码。 在您的情况下，当调用handleClick时， render function 被触发，因为 state 已更改！

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

良好实践

在您编写的情况下， isToggleOn: .prevState.isToggleOn ， function 是独立的。 它不需要 class 的任何其他属性（除了 setState，它使用不同的模式），因此在 state 更改后，反应引擎不必再次设置 ZC1C425268E68385D1AB5074C17A

不好的做法（有时更容易编写）

On the contrary if you use isToggleOn: .this.state.isToggleOn the handleClick function is dependent of this.state so every time it changes, the react engine has to "re-declare" the function by sort of substituting this.state with {isToggleOn:...}

如何重新创建该模式

 function myRandom(property){ //Kind of private Variable let hiddenVar=Math.random(); return property(hiddenVar); } //Let's say here the Math class is unreachable while myRandom is. myRandom((num)=>{ console.log(num);//This ac })

Answer 3

也许只是检查一下文档？

setState() 的第二个参数是一个可选的回调 function，它将在 setState 完成并重新渲染组件后执行。 通常我们建议使用 componentDidUpdate() 来代替这种逻辑。

本质上，您将在 function 中获取 state 的先前实例，然后对 state 进行更改并返回它。 这个新的 state 将被保存并导致重新渲染您的组件。

如果您使用函数式组件，您可以不必在此处传递回调，并且可以执行以下操作：

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

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