this.setState is called asynchronously, so there is a callback function. After setSate finishes processing, it will go through the callback function
The shouldComponentUpdate method is called when the props or state state changes
Component will update: called when a component takes over a new props or state, but the render has not been called
componentDidUpdate: called as soon as the component completes the update. Not called at initialization
render: page rendering function
componentWillUnmount: called immediately when a component is removed from the DOM. (called when the page leaves)

 constructor() {
        super();
        this.state = {
            name: 'Zhang San',
            age: 20
        }
    }
    changeName(mName) {
        this.setState({
            name: mName,
            age: 23
        }, () => {
            console.log("Callback function:" + this.state.name)
        });
        console.log("Change name or not:" + this.state.name);
    }

    render() {
        var name = "<span style='color: #Ff0000; '> Zhang San < / span > ";
        return (
            <div>
                <div>I am from state Delivered,Name is{this.state.name},Age is{this.state.age}</div>
                <button onClick={this.changeName.bind(this,"Wang Wu")} type="button">Age change</button>
            </div>
        )
    }
}

Bidirectional binding

export default class EventComponet extends Component {
    constructor() {
        super();
        this.state={
            sText:""
        }
    }

    render() {
        return (
            <div>
                <input onChange={(e) => {
                    console.log(e.target.value);
                    this.setState({
                        sText:e.target.value
                    })
                }}/>
                <div>{this.state.sText}</div>
            </div>
        )
    }
}

Select all and invert

export default class EventComponet extends Component {
    constructor() {
        super();
        this.state = {
            sText: "",
            list: [
                {id: "1", title: "News headline 1", checked: false},
                {id: "2", title: "Headline 2", checked: false},
                {id: "3", title: "Headline 3", checked: false},
                {id: "4", title: "Headline 4", checked: false},
                {id: "5", title: "News headline 5", checked: false},
                {id: "6", title: "Headline 6", checked: false},
                {id: "7", title: "Headline 7", checked: false},
                {id: "8", title: "Headline 8", checked: false},
            ]
        }
    }

    handleChecked(e, index) {
        let tList = this.state.list;
        tList[index].checked = e.target.checked;
        this.setState({
            list: tList
        });
        console.log("itemOncheck", JSON.stringify(this.state.list));
    }

    allChecked(e) {
        if (e.target.checked) {
            let aList = this.state.list;
            if (aList.length > 0) {
                for (let i = 0; i < aList.length; i++) {
                    aList[i].checked = true;
                }
                this.setState({list:aList},()=>{
                    console.log("allChecked",this.state.list)
                });
            }


        } else {
            let aList = this.state.list;
            if (aList.length > 0) {
                for (let i = 0; i < aList.length; i++) {
                    aList[i].checked = false;
                }
                this.setState({list:aList},()=>{
                    console.log("allChecked",this.state.list)
                });
            }
        }
    }

    render() {
        return (
            <div>
                <input onChange={(e) => {
                    console.log(e.target.value);
                    this.setState({
                        sText: e.target.value
                    })
                }}/>
                <div>{this.state.sText}</div>
                <div><input type='checkbox' onClick={this.allChecked.bind(this)}/>Select all and invert</div>
                <div>
                    <ul>
                        {
                            this.state.list.map(
                                (item, index) => {
                                    return (
                                        <li key={index}>
                                            <label><input type='checkbox'  checked={item.checked?'checked':''} onClick={(e) => {
                                                this.handleChecked(e, index)
                                            }}/>{item.title}</label>
                                        </li>
                                    )
                                }
                            )
                        }
                    </ul>
                </div>
                <button type="button">Submission</button>
            </div>
        )
    }
}