lovecoding
/
w1020


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576
							<!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"));
        function App () {
            return <Good/>
        }
        class Good extends React.Component {
            // 构造器 this.state 赋值对象 为事件处理函数绑定实例
            // state 可以修改
            constructor(props) {
                super(props);
                this.state = {
                    now: new Date()
                };
            }
            componentDidMount() {
                // 挂载  会在组件挂载后进行使用
                console.log("1");
               this.timer = setInterval(()=>{
                    // 在React中 更新状态的唯一方式：调用组件实例setState方法
                    // setState方法在修改状态的时候 就是新值与旧值合并 相同属性再覆盖掉旧的状态
                    this.setState({
                        now:new Date()
                    })
                   
                },1000)

            }
            componentDidUpdate(prevProps, prevState, snapshot) {
                // 更新  会在组件更新后调用 首次渲染不执行次方法
                console.log("2",prevProps, prevState, snapshot)
            }
            componentWillUnmount() {
                // 卸载 会在组件卸载及销毁之前调用
                console.log("3")
                clearInterval(this.timer)
            }
            static getDerivedStateFromProps(props, state) {
                // 会在初始挂载和后续更新时调用 render 之前调用它
                // 它应该返回一个对象来更新 state，或者返回 null 就不更新任何内容
                console.log("4",props, state)
            }
            getSnapshotBeforeUpdate(prevProps, prevState){
                // 会在 React 更新 DOM 之前时直接调用它
                console.log("5",prevProps, prevState)
                return 12;
            }
            render() { // 是类组件中唯一必须实现的方法
                console.log("你好")
                return (
                    <div>
                        <h1>现在是{this.state.now.toUTCString()}</h1> 
                    </div>
                )
            }
        }
        root.render(<App/>);
    </script>

</body>

</html>