|
|
@@ -0,0 +1,76 @@
|
|
|
+<!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>
|
郑柏铃