javascript - Enkel react-räknare

Jag är ny på att lära mig React och har valt att börja med att använda Visual Studios .NET + React-mall, som gav mig detta kodstycke i en .tsx-fil som en demonstration av hur man gör en enkel knapp som ökar en räknare:

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

Vilket producerar den här sidan som bara ökar numret när knappen trycks.

Det jag är förvirrad över är varför det behöver finnas ett gränssnitt och 'tillstånd'. Om jag hade implementerat det själv skulle det ha sett ut så här:

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

Förutom att detta inte gör någonting - räknaren stannar alltid på noll. Koden hoppar inte helt över ändå: att lägga in console.log(this.currentCount); inne i incrementCounter() visar faktiskt att räkningen ökar med varje knapptryck i debugkonsolen.

Så vad är speciellt med att använda ett interface här? Och varför behöver inkrementeringen göras via setState istället för en direkt variabelökning?

Svar #1

React använder state för att lagra data som behövs av komponenten i den. Du kommer att se ett vanligt mönster när du utvecklar React-applikationer där props, eller delar av dem, lagras i state, eftersom props bör vara oföränderliga, men state är det inte.

Det är där den inbyggda funktionen setState() kommer in. Med den kan du ändra de lagrade uppgifterna. Dessutom utlöser den en omrendering varje gång du ändrar de uppgifter som lagras i state via setState().

Detta är särskilt användbart när man hanterar kontrollerade komponenter, som input-element i ett form.

Du borde ta en titt på den här handledningen, den hjälpte mig mycket när jag började lära mig React.

Svar #2

setState används för att utlösa en metod som heter shouldComponentUpdate, vilken avgör om komponenten bör uppdateras/renderas om genom att titta på datan i this.state för att se om den har ändrats.