Component state -state

The way to update a component in React is to update the state, which then rerenders the component

Video Tutorial Address

1. Creating a component

   import React, {Component} from "react";
   
   export default class State extends Component<any.any> {
   
       render() {
           return (
               <>
               </>)}}Copy the code

2. Create an interface to define state

interface IState {
    counter: number
}
Copy the code

3. Add state to the component

   import React, {Component} from "react";
   
   interface IState {
       counter: number
   }
   
   export default class State extends Component<any.IState> {
   
       render() {
           return (
               <>
               </>)}}Copy the code

4. Initialize the state

The official documentation recommends that the state be initialized in the constructor, and explicitly states that this. State assignment can only be initialized once there

import React, {Component} from "react";

interface IState {
    counter: number
}

export default class State extends Component<any.IState> {

    constructor(props: any, context: any) {
        super(props, context);
        // State can only be assigned here
        this.state = {
            counter: 0}}render() {
        return (
            <>
                {this.state.counter}
            </>)}}Copy the code

5. Update the state

import React, {Component} from "react";

interface IState {
    counter: number
}

export default class State extends Component<any.IState> {
 
    constructor(props: any, context: any) {
        super(props, context);
        // State can only be assigned here
        this.state = {
            counter: 0}}componentDidMount() {
        // This is wrong
        // State updates are asynchronous
        setInterval(() = > {
            this.setState({
                counter: this.state.counter + 1})},100)}render() {
        return (
            <>
                {this.state.counter}
            </>)}}Copy the code

The official documentation clearly states that state is more asynchronous. We write above that, although it can be executed without problems, it will get the result we want, but it will cause problems when changing state concurrently. Because updates to state combine multiple changes into one operation.

6. The wrong sample

import React, {Component} from "react";

interface IState {
    counter: number
}

export default class State extends Component<any.IState> {

    constructor(props: any, context: any) {
        super(props, context);
        // State can only be assigned here
        this.state = {
            counter: 0}}componentDidMount() {
        // State updates are asynchronous
        // State changes are merged
        // Error
        for (let i = 0; i < 100; i++) {
            this.setState({
                counter: this.state.counter + 1}}})render() {
        return (
            <>
                {this.state.counter}
            </>)}}Copy the code

So let’s take a guess at what this is going to look like. You don’t have to guess. It’s going to look like 1. Why is that? Because state updates are asynchronous, React combines multiple updates into one operation.

7. Update state correctly

State updates are asynchronous, and the official way to do this is to pass in a function that returns a new state

import React, {Component} from "react";

interface IState {
    counter: number
}

export default class State extends Component<any.IState> {
    constructor(props: any, context: any) {
        super(props, context);
        // State can only be assigned here
        this.state = {
            counter: 0}}componentDidMount() {
        // State updates are asynchronous
        for (let i = 0; i < 100; i++) {
            this.setState((state, props) = > ({
                counter: state.counter + 1}}}))render() {
        return (
            <>
                {this.state.counter}
            </>)}}Copy the code