简单的反应计数器

Question

我是 React 的新手，并选择开始使用 Visual Studio 的 .NET + React 模板，该模板为我提供了 .tsx 文件中的这段代码，作为如何制作一个增加计数器的简单按钮的演示：

import * as React from 'react';
import { RouteComponentProps } from 'react-router';

interface CounterState
{
    currentCount: number;
}

export class Home extends React.Component<RouteComponentProps<{}>, CounterState>
{
    constructor()
    {
        super();
        this.state = { currentCount: 0 };
    }

    public render()
    {
        return <div>
            <h1>Counter</h1>
            <p>This is a simple example of a React component.</p>
            <p>Current count: <strong>{this.state.currentCount}</strong></p>
            <button onClick={() => { this.incrementCounter() }}>Increment</button>
        </div>;
    }

    incrementCounter()
    {
        this.setState
        ({
            currentCount: this.state.currentCount + 1
        });
    }
}

这会产生 ，按下按钮时只会增加数字。

我感到困惑的是为什么需要一个接口和“状态”。如果我自己实现它，它会看起来像这样：

import * as React from 'react';
import { RouteComponentProps } from 'react-router';

export class Home extends React.Component<RouteComponentProps<{}>>
{
    currentCount: number;

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

    public render()
    {
        return <div>
            <h1>Counter</h1>
            <p>This is a simple example of a React component.</p>
            <p>Current count: <strong>{this.currentCount}</strong></p>
            <button onClick={() => { this.incrementCounter() }}>Increment</button>
        </div>;
    }

    incrementCounter()
    {
        this.currentCount += 1;
        this.render();
    }
}

除了这不会做任何事情 - 计数器始终保持为零。 不过，代码并没有被完全跳过：在

console.log(this.currentCount);

内添加

incrementCounter()

实际上确实显示了在调试控制台中按下每个按钮时计数的增加。

那么这里使用接口有什么特别之处呢？为什么增量需要通过setState来完成而不是直接变量增量？

Answer 1

React

利用状态来存储组件所需的数据。 在开发

React

应用程序时，您会看到一个常见模式，其中

props

或其一部分存储在

state

中，因为

props

应该是不可变的，但

state

不是。

这就是内置函数

setState()

发挥作用的地方。使用它，您可以更改存储的数据。此外，每次您通过

state

更改存储在

setState()

中的数据时，它都会触发重新渲染。

这在处理

controlled components

时特别有用，例如

input

中的

form

元素。

你应该看看这个教程，它对我开始学习时帮助很大

React

。

Answer 2

setState 用于触发一个名为 shouldComponentUpdate 的方法，该方法通过查看 this.state 中的数据来确定组件是否应该更新/重新渲染。

Answer 3

一些事情：

当状态发生变化时，React 会更新它的虚拟 DOM。具体来说，它会对该更改的任何状态属性（在

this.state

下）做出反应。在构造函数中设置这些之后，您可以通过更新状态本身。

this.setState()

，它允许 React 对实际 DOM 进行正确的更新，而不会出现性能瓶颈。

此外，切勿像使用您的

render()

版本那样称呼自己为

incrementCounter

。这是 React 框架在渲染您正在处理的当前组件时使用的钩子。

---

为了回答你的问题，

interface

实际上比任何东西都更可选。我已经开发了一些 React 应用程序，但尚未使用它。

...至于使用

setState

，请参考我上面的说法。

Answer 4

如果你想要一种更简单/更快的方法来在 React 中设置计数器而不必使用类组件，我会说这样做：

函数英雄() { const [count, setCount] = useState(0);

const handleCount = (计数器) => { setCount(计数器);

return count;
  };

return(
    <button onClick={() => handleCount(count + 
    1)}>Increment+</button>
      <button
    onClick={() => handleCount(count >= 1 ? count 
    - 1 : handleCount("0"))}
     >
     Decrement-
    </button> )}