console 命令行工具 X clear

console

class ReactList extends React.Component {
    constructor(props) {
        super(props);
        alert("初始化加载！");
        alert("constructor");
        this.state = {str: 'xrf'};
    }

    componentWillMount() {
        alert("componentWillMount");
    }

    componentDidMount() {
        alert("componentDidMount");
    }

    componentWillReceiveProps(nextProps) {
        alert("componentWillReceiveProps");
    }

    shouldComponentUpdate() {
        alert("shouldComponentUpdate");
        return true;
    }

    componentWillUpdate() {
        alert("componentWillUpdate");
    }

    componentDidUpdate() {
        alert("componentDidUpdate");
    }

    componentWillUnmount() {
        alert("componentWillUnmount");
    }

    setTheState() {
        let s = 'xrf';
        if (this.state.str === s) {
            s = 'XRF';
        }
        this.setState({str: s});
    }

    forceItUpdate() {
        this.forceUpdate();
    }

    render() {
        alert("render");
        return (
            <div>
                <span>{"Props"} {parseInt(this.props.num)}</span>
                <br/>
                <span>{"State"} {this.state.str}</span>
            </div>
        );
    }
}

class Container extends React.Component {
    constructor(props) {
        super(props);
        this.state = {num: Math.random() * 100};
    }

    propsChange() {
        this.setState({
            num: Math.random() * 100
        });
    }

    setReactListState() {
        this.refs.rList.setTheState();
    }

    forceReactListUpdate() {
        this.refs.rList.forceItUpdate();
    }

    unmountReactList() {
        React.unmountComponentAtNode(document.getElementById('container'));
    }

    parentForceUpdate() {
        this.forceUpdate();
    }

    render() {
        return (
            <div>
                <a href="javascript:;" className="box" onClick={this.propsChange.bind(this)}>propsChange</a>
                <a href="javascript:;" className="box" onClick={this.setReactListState.bind(this)}>setReactListState</a>
                <a href="javascript:;" className="box" onClick={this.forceReactListUpdate.bind(this)}>forceReactListUpdate</a>
                <a href="javascript:;" className="box" onClick={this.unmountReactList.bind(this)}>unmountReactList</a>
                <a href="javascript:;" className="box" onClick={this.parentForceUpdate.bind(this)}>parentForceUpdate</a>
                <ReactList ref="rList" num={this.state.num}/>
            </div>
        );
    }
}

ReactDOM.render(
    <Container/>,
    document.getElementById('container')
);

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>React生命周期演示</title>
</head>
<body>
  <div id="container"></div>
</body>
</html>

.box{
  color:red;
}