React生命周期

import React, {Component, PureComponent} from 'react'
import ReactDOM from 'react-dom'
import 'bootstrap/dist/css/bootstrap.css'

/*
 *  如果props或者是state里面给的内容一样，Component也会走一遍历更新确认
 */

/*
    React.createElement()
    React.createContext()
    React.createFactory()
    React.createRef()
    React.cloneElement()
*/

class Vote extends Component {
    constructor(props, context, updater) {
        super(props);
        console.log("构造方法1")
        this.state = {
            times: 0
        }
    }

    render() {
        console.log('render方法3');
        let {times} = this.state
        return (
            <div>
                {times}
                <button className='btn btn-danger' onClick={(e) => {
                    this.handClick("更改", e)
                }}>更改
                </button>
            </div>
        )
    }

    handClick(flag, e) {
        //也可以这样设置e
        // this.setState((prevState, props) => {
        //     return {times: prevState.times};
        // });
        //两个版本的内容，加大括号{}的则要,则要加return  可以换成()里面则不要加Return
        this.setState((prevState, props) => ({times: prevState.times + 1}));
    }

    componentWillMount() {
        console.log("组件将要加载2");
    }

    componentDidMount() {
        console.log("组件已经加载4");
    }

// 在组件更新前进行判断 ，要不要更新
    shouldComponentUpdate(nextProps, nextState) {
        console.log("是否要更新");
        return true;
    }

//在同意之后 ，则组件做一个通知，组件即将更新
    componentWillUpdate(nextProps, nextState) {
        console.log("组件将要更新", nextState.times);
    }

//在组件更新完成后，提示完成更新
    componentDidUpdate(prevProps, prevState, snapshot) {
        console.log("组件已经更新", prevState.times);
        console.log(snapshot);
    }

    componentWillReceiveProps (nextProps,nextContext){
        console.log(nextProps);
    }
}

ReactDOM.render(<div>aaaaaaaaaa
    <Vote/>
</div>, root);

转载于:https://www.cnblogs.com/leigepython/p/9389416.html