react-webpack-flux-babel-natliu/src/index.jsx

react 全栈

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Clock from './Clock';
import PropTypes from "prop-types";

class Index extends React.Component{

    element;
    step = 0;

    static defaultProps = {
        value: 'hello world'
    }

    static propTypes = {
        value: PropTypes.string.isRequired
    }

    constructor(props){
        super(props);
        console.log('constructor step ', this.step++);
        this.state = {
            count: 0,
            value: props.value
        }
    }

    getElement = (el) => {
        if (!this.element) {
            this.element = el;
        }
        return this.element;
    }

    change = (e) => {
        this.setState({
            value: e.currentTarget.value
        })
    }

    componentDidMount(){
        console.log(this.step++, '已挂载 ===> ', this.element);
    }

    componentWillMount(){
        console.log(this.step++, '准备挂载...');
    }

    componentWillReceiveProps(props){
        console.log(this.step++,'接收新的props ====> ', props);
    }

    shouldComponentUpdate(nextProps, nextState){
        console.log(this.step++, "是否更新？ ===> ", nextProps, nextState, this.state!== nextState);
        return true;
    }

    componentWillUpdate(){
        console.log(this.step++,"即将更新视图....");
    }

    componentDidUpdate(){
        console.log(this.step++,"已经更新视图");
    }

    componentWillUnmount(){
        console.log('即将卸载组件....');
    }

    render(){
        let count = this.state.value ? this.state.value.length : 0;
        return (
            <div className="app" ref={this.getElement}>
                <h1>hello react app</h1>
                <input value={this.state.value} onChange={this.change} />
                <p>已输入 {count} 个字符</p>
                <Clock />
            </div>
        );
    }
}


const index = document.createElement('div');
document.body.appendChild(index);
var app = ReactDOM.render(<Index />, index);
console.log(app)
window.removeApp = function() {
    ReactDOM.unmountComponentAtNode(index);
    console.log('已卸载组件');
}
window.app = app;