lovecoding
/
VIP32


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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.getElementById("root"));
        // 创建 挂载 更新 卸载
        // npm install
        // npm uninstall
        // 组件 => 组件实例
        class Good extends React.Component {
            constructor(props) {
                // props和state都可以改变页面
                // props只读 不修改
                // state 修改
                super(props);
                this.state = {
                    currentTime:new Date(),
                    aa:'1111',
                }
            }
            // 挂载
            componentDidMount() {
                console.log("挂载");
                // 更新数据 this.setState({})
               this.timer = setInterval(()=>{
                    this.setState({
                        currentTime: new Date()
                    })
                },1000)
            }

            // 更新 => 数据改变了
            componentDidUpdate() {
                console.log("更新")
            }

            // 销毁
            componentDidUnMount() {
                console.log("销毁")
                clearInterval(this.timer);
            }
            render() {
                return(
                    <div>
                        <p>{this.state.aa}</p>
                        <h1>当前时间：{this.state.currentTime.toLocaleString()}</h1>    
                    </div>
                )
            }
        }
        
        root.render(<Good/>)
    </script>
</body>
</html>