React16入门3-状态

index.html

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>


<script type="text/babel">
    class Clock extends React.Component {
        constructor(props) {
            super(props);
            this.state = {date: new Date()};
        }
        render() {
            return (
                <h2>现在时间是 {this.state.date.toLocaleTimeString()}</h2>
                );
        }
    }
    
    ReactDOM.render(
        <Clock />,
        document.getElementById('example')
    );


</script>


<div id="example"></div>

在constructor() 方法中通过 this.state 来设置当前时间的值
render() 方法中通过 this.state 来显示设置后的值

使用生命周期方法 + 定时器 实现每秒更新一次时间

index.html

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>


<script type="text/babel">
    class Clock extends React.Component {
        constructor(props) {
            super(props);
            this.state = {date: new Date()};
        }
        
        componentDidMount() {
            this.timerID = setInterval(
                () => this.tick(),
                1000
            );
        }
        
        componentWillUnmount() {
            clearInterval(this.timerID);
        }
        
        tick() {
            this.setState({
                date: new Date()
            });
        }
        
        render() {
            return (
                <h2>现在时间是 {this.state.date.toLocaleTimeString()}</h2>
                );
        }
    }
    
    ReactDOM.render(
        <Clock />,
        document.getElementById('example')
    );


</script>


<div id="example"></div>

componentDidMount() 与 componentWillUnmount() 方法被称作生命周期钩子

在组件输出到 DOM 后会执行 componentDidMount() 钩子

this.timerID 为定时器的 ID，然后在 componentWillUnmount() 钩子中卸载定时器