简单的反应计数器答案

【问题标题】：Simple react counter简单的反应计数器
【发布时间】：2018-02-14 13:26:25
【问题描述】：

我刚开始学习 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
        });
    }
}

这会产生this page，它只会在按下按钮时增加数字。

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

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();
    }
}

除了这不会做任何事情 - 计数器始终保持为零。不过，代码并没有被完全跳过：在incrementCounter() 中添加console.log(this.currentCount); 实际上会显示在调试控制台中每按一次按钮，计数就会增加。

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

【问题讨论】：

不做setState react 永远不会知道什么时候用新的状态值重新渲染你的组件。这就是为什么状态是必要的。请正确阅读官方反应文档
呃……React 用 typescript 看起来很糟糕

标签： javascript .net visual-studio reactjs typescript

【解决方案1】：

React 利用状态将组件所需的数据存储在其中。在开发React 应用程序时，您会看到一个常见模式，其中props 或其部分存储在state 中，因为props 应该是不可变的，但state 不是。

这就是内置函数setState() 发挥作用的地方。使用它，您可以更改存储的数据。此外，每次您通过setState() 更改存储在state 中的数据时，它都会触发重新渲染。

这在处理controlled components 时特别有用，例如form 中的input 元素。

你应该看看这个Tutorial，它对我开始学习React很有帮助。

【讨论】：

【解决方案2】：

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

【讨论】：

那是不正确的......无论如何都会发生重新渲染，但React 使用了几种你可以挂钩的生命周期方法。其中之一是shouldComponentUpdate()。使用此方法，您可以检查对state 或props 所做的更改并手动触发重新渲染（或阻止它）。
好的，是的，学习 React 时发生了很多事情，我的解释并不准确（我自己还在学习）我使用 reactjs.org/docs/state-and-lifecycle.html 作为参考点。
从技术上讲，shouldComponentUpdate 默认为 true。因此，如果 React 每次状态发生变化时都在后台调用 shouldComponentUpdate，那么他是正确的。
但我想说我不能真正接受这个答案，因为它看起来好像 setState 只触发了一种方法。正如生命周期所指出的那样，幕后还有很多。

【解决方案3】：

一些事情：

当状态发生变化时，React 会更新它的虚拟 DOM。具体来说，它会对该更改的任何状态属性（在this.state 下）做出反应。在构造函数中设置这些之后，您可以通过更新状态本身。 this.setState() 允许 React 对实际 DOM 进行适当的更新，而不会出现性能瓶颈。

另外，切勿像使用 incrementCounter 的版本那样自己调用 render()。这是 React 框架在渲染您正在处理的当前组件时使用的钩子。

不过，要回答您的问题，interface 实际上比任何东西都更具可选性。我已经开发了一些 React 应用程序，但还没有使用它。

...至于使用setState，参考我上面的说法。

【讨论】：