lovecoding
/
VIP20


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950
							<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../../babel.min.js"></script>
    <script src="../../react.development.js"></script>
    <script src="../../react-dom.development.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      const root = ReactDOM.createRoot(document.querySelector('#root'));

      class Clock extends React.Component {
        constructor(props) {
          super(props);
          this.state = {
            now: new Date(),
          };
        }

        // 给组件添加生命周期 就是给组件实例添加对应钩子方法即可
        componentDidMount() {
          this.timer = setInterval(() => {
            // 更新状态 now
            // 在React中 响应式的更新状态的 唯一方式：调用组件实例的setState方法。setState方法在修改状态的时候 就是 新值 与 旧值合并后再覆盖掉旧状态
            this.setState({ now: new Date() });
          }, 1000);
        }

        componentDidUpdate() {
          console.log('comp updated');
        }

        componentWillUnmount() {
          clearInterval(this.timer);
        }

        render() {
          return <h3>当前时间为：{this.state.now.toLocaleString()}</h3>;
        }
      }

      root.render(<Clock />);
    </script>
  </body>
</html>