02-React 复习React 复习 01-类的基本知识 02-原生事件绑定 03-类中方法 this 的指向 04-

React 复习

01-类的基本知识

<!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>01-函数式组件</title>
  </head>
  <body>
    <script type="text/JavaScript">
      /**
       * 总结
       * 1. 类的实例不是必须写的,需要对实例进行一些初始化操作挥着添加属性的属性需要写
       * 2. 如果A类继承了B类,且A类写了构造器,那么A类构造器中 super() 必须要调用
       * 3. 类中所定义的方法,都是放在类的原型对象上,供实例去使用
       */
      class person {
        // 构造器方法
        constructor(name, age) {
          // 构造器中的this-->类的实例对象(也就是谁new的)
          this.name = name;
          this.age = age;
        }
        // 一般方法
        speak() {
          // speak 方法放在了 ---> 类的原型对象上; 供实例使用
          // 通过person实例调用时候,speak的this就是person实例
          console.log("我叫", this.name, "我年龄是", this.age);
        }
      }
      const p1 = new person("小张", 100);
      const p2 = new person("小红", 101);
      console.log(p1);  // person {name: '小张', age: 100}
      console.log(p2);  // person {name: '小红', age: 101}
      console.log(p1.speak()); //我叫 小张 我年龄是 100
      //   创建一个student类继承于person
      class student extends person {
        constructor(name, age, grade) {
          super(name, age);
          this.grade = grade;
        }
        speak() {
          console.log(
            "我叫",
            this.name,
            "我年龄是",
            this.age,
            "我上年纪",
            this.age
          );
        }
        study() {
          // study 方法放在了 ---> 类的原型对象上; 供实例使用
          // 通过 student 实例调用时候, study 的 this 就是 student 实例
        }
      }
      const s1 = new student("小白", 10, "六年级");
      const s2 = new student("小黑", 11, "五年级");
      s1.speak(); // 我叫 小白 我年龄是 10 我上年纪 10
      console.log(s1);  // student {name: '小白', age: 10, grade: '六年级'}
      console.log(s2);  // student {name: '小黑', age: 11, grade: '五年级'}
    </script>
  </body>
</html>

02-原生事件绑定

<!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>
  </head>
  <body>
    <button id="btn1">按钮1</button>
    <button id="btn2">按钮2</button>
    <button id="btn3" onclick="demo3()">按钮3</button>
    <script>
      const btn1 = document.getElementById("btn1");
      const btn2 = document.getElementById("btn2");
      const btn3 = document.getElementById("btn3");
      btn1.addEventListener("click", () => {
        alert("点击了按钮1");
      });
      btn2.onclick = () => {
        alert("点击了按钮2");
      };
      function demo3(params) {
        alert("点击了按钮3");
      }
    </script>
  </body>
</html>

03-类中方法 this 的指向

<!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>
  </head>
  <body>
    <script type="text/javascript">
      class person {
        constructor(name, age) {
          this.name = name;
          this.age = age;
        }
        speak() {
          console.log(this);
        }
      }
      const p1 = new person("tom", 18);
      const x = p1.speak;
      x(); // undefined
      p1.speak(); // person {name: 'tom', age: 18}

      //   function demo(params) {
      //     "use strict"; // this就undefined了
      //     console.log(this); // window
      //   }
      //   demo();
    </script>
  </body>
</html>

04-展开运算符

<!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>
  </head>

  <body>
    <script>
      let arr1 = [1, 3];
      let arr2 = [2, 4];

      // 应用1:展开数组
      console.log(...arr1); // 1 3

      // 应用2: 连接数组
      let arr3 = [...arr1, ...arr2];
      console.log(arr3); // (4) [1, 3, 2, 4]

      // 应用3: 配合函数使用
      function sum(...numbers) {
        console.log(numbers); // [1]
        let sum = numbers.reduce((pre, cur) => {
          return pre + cur;
        }, 0);
        return sum;
      }
      console.log(sum(1, 2, 3, 4, 5)); // 15

      // 应用4: 构造字面量对象的时候使用展开语法
      let person = { name: "123", value: "456" };
      let person2 = { ...person }; // 这个写法 {...} 是ES6字面量形式,是被允许的
      // console.log(...person2);    // 展开运算符不能展开对象
      console.log(person2); // {name: '123', value: '456'}

      // 应用4: 合并对象
      let person3 = { ...person, address: "999" };
      console.log(person3); // {name: '123', value: '456', address: '999'}
    </script>
  </body>
</html>

05-高阶函数和函数柯里化

<!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>01-函数式组件</title>
  </head>

  <body>
    <!-- 准备好容器 -->
    <div id="test"></div>
    <div id="test1"></div>
    <!-- 引入React核心库. -->
    <script src="../React-js/react.development.js"></script>
    <!-- 引入React-dom,用于支持操作DOM -->
    <script src="../React-js/react-dom.development.js"></script>
    <!-- 引入babel,用于将jsx转为js -->
    <script src="../React-js/babel.min.js"></script>
    <!-- 写这个type的意义是为了让他知道我写的是jsx -->
    <script type="text/babel">
      /**
       * 高阶函数: 如果一个函数符合下面两个规范中的任何一个,那么该函数就是高阶函数
       *      1. 若A函数,接收的参数是一个函数,那么A函数就称为高阶函数
       *      2. 若A函数,调用的返回值依然是一个函数,那么A函数就称为高阶函数
       * 常见的高阶函数
       *      1. Promise    new Promise(()=>{})
       *      2. setTimeout
       *      3. arr.map 等等
       *
       *
       * 函数的柯里化: 通过函数调用继续返回函数的方式,实现多次接收参数最后统一处理的函数编码方式
       */
      // 1. 创建函数式组件
      class MyComponent extends React.Component {
        state = {
          username: "",
          password: "",
        };
        // 提交表单
        handleSubmit = (event) => {
          event.preventDefault(); // 可以阻止表单的默认跳转
          const { username, password } = this.state;
          console.log(username, password);
        };
        // 保存表单项的数据到状态中
        saveFormData = (dataType) => {
          return (event) => {
            this.setState({ [dataType]: event.target.value });
          };
        };
        render() {
          return (
            <form onSubmit={this.handleSubmit}>
              用户名:{" "}
              <input
                onChange={this.saveFormData("username")}
                type="text"
                name="username"
              />
              密码: <input
                onChange={this.saveFormData("password")}
                type="password"
                password="password"
              />
              <button>登录</button>
            </form>
          );
        }
      }
      // 2.渲染组件到页面
      ReactDOM.render(<MyComponent />, document.getElementById("test1"));
    </script>
  </body>
</html>

06-对象相关的知识

<!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>
  </head>

  <body>
    <script>
      let a = "name";
      let obj = {};
      obj[a] = a;
    </script>
  </body>
</html>

07-演示函数柯里化

<!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>
  </head>

  <body>
    <script>
      // function sum(a, b, c) {
      //     return a + b + c
      // }
      // const result = sum(1, 2, 3)

      // 函数柯里化
      function sum(a) {
        return (b) => {
          return (c) => {
            return a + b + c;
          };
        };
      }
      const result = sum(1)(2)(3);
      console.log(result);
    </script>
  </body>
</html>