我的个人博客

<script type="text/babel">
      //ref：相当于id,用于货物元素标签
      class Demo extends React.Component {
        showData = () => {
          console.log(this);
          alert(this.refs.input1.value);
        };
        showData2 = () => {
          console.log(this);
          alert(this.refs.input2.value);
        };
        render() {
          return (
            <div>
              <input ref="input1" type="text" placeholder="点击按钮提示数据" />
              <button onClick={this.showData}>点击我提示左侧数据</button>
              <input
                onBlur={this.showData2}
                ref="input2"
                type="text"
                placeholder="失去焦点提示数据"
              />
            </div>
          );
        }
      }

      //渲染
      //这里面的{...p}，相当于展开name: "Tom", sex: "男", age: "18"
      ReactDOM.render(<Demo />, document.getElementById("test"));
    </script>

<script type="text/babel">
      function Person(props) {
        const { name, age, sex } = props;
        return (
          <ul>
            <li>{name}</li>
            <li>{sex}</li>
            <li>{age + 1}</li>
          </ul>
        );
      }
      //对传入的数据类型进行限制
      Person.propTypes = {
        //表示姓名这个属性是字符串类型且必须是要传的
        name: PropTypes.string.isRequired,
        sex: PropTypes.string,
        age: PropTypes.number,
      };

      //设置默认值
      Person.defaultProps = {
        sex: "不男不女",
        age: 18,
      };

      //渲染
      //这里面的{...p}，相当于展开name: "Tom", sex: "男", age: "18"
      ReactDOM.render(<Person name="Tom" />, document.getElementById("test"));
    </script>

<script type="text/babel">
      class Person extends React.Component {
        constructor(props) {
          super(props);
          console.log(props);
          //传不传props,取决于要不要用到this.props
          console.log(this.props);
        }
        //对传入的数据类型进行限制
        static propTypes = {
          //表示姓名这个属性是字符串类型且必须是要传的
          name: PropTypes.string.isRequired,
          sex: PropTypes.string,
          age: PropTypes.number,
          speak: PropTypes.func, //限制传入的speak必须是函数
        };

        //设置默认值
        static defaultProps = {
          sex: "不男不女",
          age: 18,
        };
        render() {
          console.log(this);
          const { name, sex, age } = this.props;
          //props是只读的，不能修改
          //this.props.age=80  //报错
          return (
            <ul>
              <li>{name}</li>
              <li>{sex}</li>
              <li>{age + 1}</li>
            </ul>
          );
        }
      }

      function speak() {
        console.log("我要说话");
      }

      let p = { name: "Tom", age: 19 };
      //渲染
      //这里面的{...p}，相当于展开name: "Tom", sex: "男", age: "18"
      ReactDOM.render(
        <Person {...p} speak={speak} />,
        document.getElementById("test")
      );
    </script>

<script type="text/babel">
      class Person extends React.Component {
        render() {
          console.log(this);
          const { name, sex, age } = this.props;
          return (
            <ul>
              <li>{name}</li>
              <li>{sex}</li>
              <li>{age + 1}</li>
            </ul>
          );
        }
      }
      //对传入的数据类型进行限制
      Person.propTypes = {
        //表示姓名这个属性是字符串类型且必须是要传的
        name: PropTypes.string.isRequired,
        sex: PropTypes.string,
        age: PropTypes.number,
        speak: PropTypes.func, //限制传入的speak必须是函数
      };
      function speak() {
        console.log("我要说话");
      }

      //设置默认值,也会被添加到props里面
      Person.defaultProps = {
        sex: "不男不女",
        age: 18,
      };
      let p = { name: "Tom", age: 19 };
      //渲染
      //这里面的{...p}，相当于展开name: "Tom", sex: "男", age: "18"
      ReactDOM.render(
        <Person {...p} speak={speak} />,
        document.getElementById("test")
      );
    </script>

<script type="text/babel">
      class Person extends React.Component {
        render() {
          console.log(this);
          const { name, sex, age } = this.props;
          return (
            <ul>
              <li>{name}</li>
              <li>{sex}</li>
              <li>{age + 1}</li>
            </ul>
          );
        }
      }
      let p = { name: "Tom", sex: "男", age: "18" };
      //渲染
      //这里面的{...p}，相当于展开name: "Tom", sex: "男", age: "18"
      ReactDOM.render(<Person {...p} />, document.getElementById("test"));
    </script>

<script type="text/babel">
     class Person extends React.Component {
       render() {
         console.log(this);
         const { name, sex, age } = this.props;
         return (
           <ul>
             <li>{name}</li>
             <li>{sex}</li>
             <li>{age}</li>
           </ul>
         );
       }
     }

     //渲染
     //被添加上了props:{name: "Tom", sex: "男", age: "18"}
     //这里面的{...p}，相当于展开name: "Tom", sex: "男", age: "18"
     ReactDOM.render(
       <Person name="Tom" sex="男" age="18" />,
       document.getElementById("test")
     );

<script type="text/babel">
      class Weather extends React.Component {
        state = { isHot: true };
        changeWeather = () => {
          this.setState({ isHot: !this.state.isHot });
        };

        render() {
          const { isHot } = this.state;
          return (
            <h1 onClick={this.changeWeather}>
              今天天气很{isHot ? "炎热" : "凉爽"}
            </h1>
          );
        }
      }

      //渲染
      ReactDOM.render(<Weather />, document.getElementById("test"));
    </script>

<script type="text/babel">
      class Weather extends React.Component {
        constructor(props) {
          super(props);
          //1、更改原型上面的handleClick函数并将this改为实例化对象
          //2、将这个函数赋值给一个新的函数handleClick ，并把他放在实例化对象自己身上
          this.handleClick = this.handleClick.bind(this);
          this.state = { ishot: true };
        }

        render() {
          // 这里面的this指向的是实例化对象
          //console.log(this);
          let content;
          if (this.state.ishot) {
            content = "炎热";
          } else {
            content = "凉爽";
          }
          return <h1 onClick={this.handleClick}>今天天气很{content}</h1>;
        }

        handleClick() {
          //谁调用指向谁
          //这里面由于onClick={this.handleClick}，
          //handleClick是作为onClick的回调，而不是通过实例化对象直接调用的，且类里面的方法开启了严格模式，所以this为undefined
          console.log(this);
          console.log(this.state.ishot);
          //state的状态不能直接修改，要用setState
          const { ishot } = this.state;
          this.setState({ ishot: !ishot });
        }
      }

      //渲染
      ReactDOM.render(<Weather />, document.getElementById("test"));
    </script>

<script type="text/babel">
      class Person extends React.Component {
        render() {
          //这里面的render被放在Person的原型对象身上，供所有类new出来的实例化对象使用
          //render中的this指向的是Person实例化对象
          return <h1>我是类组件,我适用于复杂的组件</h1>;
        }
      }
      //渲染
      ReactDOM.render(<Person />, document.getElementById("test"));
    </script>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button>点击我</button>
    <script>
      class Star {
        constructor(name, age) {
          //这里的this指的是类的实例化对象
          this.name = name;
          this.age = age;
        }
        //添加公共方法，这里的方法被放在原型对象身上
        sing(song) {
          console.log(this.name + song);
        }
      }

      let ldh = new Star("刘德华", 18);
      console.log(ldh.age);
      ldh.sing("ldh唱的");

      console.log("-------------------------------------");
      class Father {
        constructor(x, y) {
          //公共的属性和方法一定要加this
          this.x = x;
          this.y = y;
          this.btn = document.querySelector("button");
          this.btn.onclick = this.say;
        }
        sum() {
          console.log(this.x + this.y);
        }
        say() {
          console.log("我是爸爸");
        }
      }

      //extends会继承父类中的属性和方法
      class Son extends Father {
        constructor(x, y) {
          //由于子类和父类的this指向不同,这里用了super关键字调用了父类的构造函数
          super(x, y);
          //super关键字一定要写在this之前
          this.x = x;
          this.y = y;
          this.btn = document.querySelector("button");
          this.btn.onclick = this.saySon;
        }
        say() {
          //在子类中可以通过/super关键字调用父类中的普通函数
          super.say();
        }

        saySon() {
          console.log("我是龟儿");
          //this表示谁调用就指向谁
          //这里面的this指向的是button，因为button调用了他
          console.log(this); //如果使用点击调用this就是<button>点击我</button>
          //如果不点击直接通过son.saySon();调用this就是Son
        }

        jianfa() {
          //这里面的this指向的是son，因为son调用了他
          console.log(this); //Son {x: 2, y: 1, btn: button}
          console.log(this.x - this.y);
        }
      }

      var son = new Son(2, 1);
      son.sum();
      //查找原则:先去子类找，找不到再去父类里面找
      son.say();
      son.jianfa();
      son.saySon();
    </script>
  </body>
</html>