state 例子

[BUPTlhuanyu]

import React, {useState} from 'react';

function Test () {
    const [num, setNum] = useState(0);
    const click = (e) => {
        e.stopPropagation();
        setNum(num + 1);
        setNum(num + 1);
    }
    return (
        <div onClick={click}>
            numer: {num}
        </div>
    );
}

export default class App extends React.Component {
    state: any;
    constructor(props: any) {
        super(props);
        this.state = {
            a: 0,
            b: 0,
            c: {
                f: 10,
                ff: 20
            }
        }
    }

    componentDidMount(): void {
        // 同步：一次 render
        this.setState({
            a: this.state.a + 1,
        });
        this.setState({
            a: this.state.a + 1,
        });

        // 异步 state：多次 render
        setTimeout(() => {
            this.setState({
                b: this.state.b + 1,
            });
            this.setState({
                b: this.state.b + 1,
            });
        }, 1000);
    }
    click() {
        // 内部使用 object.assign 合并 state
        // this.setState({
        //     c: {
        //         f: Math.random()
        //     }
        // });

        // 加 1，因为 setState 只收集并不会立马更新 state 中的值，所以两次 this.state.a 都是一样的
        this.setState({
            a: this.state.a + 1,
        });
        this.setState({
            a: this.state.a + 1,
        });

        // 加 2，因为 setState 只收集回调， state 更新的时候会调用回调，所以两次 prevState.a 都是上次更新的结果
        this.setState((prevState) => {
            return {
                a: prevState.a + 1,
            }
        });
        this.setState((prevState) => {
            return {
                a: prevState.a + 1,
            }
        });

        // 触发多次 render
        setTimeout(() => {
            this.setState({
                b: this.state.b + 1,
            });
            this.setState({
                b: this.state.b + 1,
            });
        }, 1000);
    }
    render(): React.ReactNode {
        console.log('【触发的同步渲染】生命周期函数中多次 setState 只触发一次 update，【触发的异步渲染】异步代码或者事件回调中多次 setState 会触发多次 update');
        return <div onClick={this.click.bind(this)} style={{width: 500,height: 500,backgroundColor: 'red'}}>
            <div>{this.state.a}</div>
            <div>{this.state.b}</div>
            <div>{this.state.c.f}</div>
            <div>{this.state.c.ff}</div>
            <Test></Test>
        </div>
    }
}