Day2. JSX核心语法一, 跟着Demo入门JSX

一. Javascript类的定义

JS语法补充

1. ES5中定义类

function Person(name, age) {
    this.name = name;
    this.age = age;
}

var p = new Person("why", 18);
console.log(p.name, p.age);

分析.png

• class ES6开始才有的关键字

2. ES6中通过class 创建类

class Person {
  // ES6中所有的类可以实现一个构造方法, 名字是固定的, new自动调用, 不能手动调用
  constructor(name, age) {
      this.name = name;
      this.age = age;
  }

  // 定义方法
  running() {
      console.log(this.name, this.age, "running");
  }
}

const p = new Person("why", 18);
console.log(p.name, p.age);
p.running();

 // this绑定题目
const func = p.running;
func();
//1. 能不能正常的调用方法? 可以.
//2. 这里打印的name age是什么? 报错信息
// undefined, 当前的this没有绑定任何东西, 没有绑定也没有隐式绑定

var obj = {
  name: "kobe",
  age: 40
}
func.call(obj);// call主动绑定this

let func2 = p.running;
//重新给func赋值
func2 = func2.bind(obj);// 明确的绑定obj
// 可以打印, 显示绑定

报错.png

二. JavaScript类的继承

• 面向对象有三大特性: 封装/继承/多态
• 继承: 1. 减少重复的代码 2. 多态的前提
• JavaScript是一种弱类型的语言, 鸭子类型(看起来像是鸭子, 走起来像鸭子, 就是鸭子)
• 不严格的要求传入的类型, 好处是灵活, 坏处是类型不安全
• TypeScript越来越重要, 替代JavaScript的一个原因, 安全

class Person {
   constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  running() {
    console.log("running");
  }
}

class Student {
   constructor(name, age, sno) {
    this.name = name;
    this.age = age;
    this.sno = sno;
  }
}

class Teacher {
   constructor(name, age, title) {
    this.name = name;
    this.age = age;
    this.title = title;
  }
}

// 重复的代码非常多 => 继承
// 将公共的代码抽取到父类里面

=> 2.0版本, 继承

class Student2 extends Person {
  constructor(name, age, sno) {
    // 调用父类的构造方法
    super(name, age);
    this.sno = sno;
  }
}

const stu = new Student("why", 18, 110);
console.log(stu.name, stu.age, stu.sno);
stu.running();

class Teacher2 extends Person {
  constructor(name, age, title) {
    // 子类中是必须初始化父类对象, 不然有问题, 报错, 见图
    super(name, age);
    this.title = title;
  }
}

const stu = new Student("why", 18, 110);
console.log(stu.name, stu.age, stu.sno);
stu.running();

const teacher = new Teacher2("why", 18, 110);
console.log(teacher.name, teacher.age, teacher.title);
teacher.running();

子类中是必须初始化父类对象, 不然有问题.png

• babel -> ES5 语法糖

三. React知识点, 两个案例, 对之前学的东西做个巩固

1. 电影列表

电影列表.png

1. 引入依赖, 必须依赖三个东西

• 把三个东西放在本地, 本地引入
  
  ...

2. 编写React代码

• EMT语法, HTML基础知识
• 真是开发中, 先从服务器获取, 存到某一个地方 this.state = {movies: []}
• 先写死, 定义一组数据
• for循环生成多个
• , 多个
• 放到
  里面

  const liArray = [];
  //ES6语法 in拿到的是下表值
  for (let movie of this.state.movies) {
    liArray.push( 
  {movie}
  );
  }
  return (
    
  
      
  
        {liArray}
      
    
  )
  

  • 还有一种办法, {}里面可以跟的是一个表达式

  
    {
      
    }
  
  

  补充: 数组的高阶函数

  • map用的特别多, 必须掌握
  • names里面追加一个000

  const names = ["aaa", "bbb", "ccc"];
  
  // names.map(回调函数, 给前面的回调函数绑定this, 很少用到)
  // forEch是做一个遍历 map映射
  
  // 回调函数有3个参数
  // 参数1: 执行时的对应元素
  // 参数2: 对应的下标值
  // 参数3: 完整的数组对象
  const newNames = names.map((item, index, array) => {
    return item + "000"
  })
  console.log(newNames);
  

  打印结果.png

  • map函数应用

    
    
    map函数应用.png

  
    {
      this.state.miveis.map((item) => {
        return 
  {item}
      })
    }
  
  

  • React的自主性会更强
  • v-for 指令
  • Vue有一个缺点, 使用的一个模板, 相似的组件不单独抽成一个组件, 不好复用

  • React只需要抽成一个变量, 更灵活, 各有好处

    
    
    Vue模板.png

  2. 计数器案例

  计数器.png

  • 体验React

  • 每次创建都需要先引入三个文件, 比较多的重复的东西 => 搞一个公共的东西

  • 之后只要是新创建一个文件快速生成一个代码 => 代码片段, VSCode创建代码片段

    
    
    image.png
    
    
    image.png

  • 选择html片段

  • 规则有点麻烦, 键值对, 描述, 对象, 前缀, body数组双引号写, 手动太麻烦 => 一个网站
    转换网站

  • 绑定事件

  increment() {
    console.log("+1");  
    this.
    // this是一个正确的this吗? undefined
    //=> `{this.increment.bind(this)}`
    this.setState({
      counter: this.state.counter - 1
    })
  }
  
  decrement() {
      console.log(-1);
  }
  
  

  this绑定.png
  • Component里面有个setState
  • 快捷键 ctrl + 点击

  四. 认识JSX

  1. 认识JSX的语法

  • 这段变量的声明右侧赋值的标签语法是什么?

  // jsx语法, 没有三个引入会报错
  const element 
  Hello World
  
  ReactDOM.render(element, cocument.getElementById("app"))
  

  报错.png
  
  
  JSX.png

  为什么React选择了JSX?

  • 看起来有点奇怪, html + js 融在一起, 不好的编程习惯, 结构要和样式分离, 低耦合 => React的设计哲学♂, all in js
  • React认为渲染逻辑本质上与其他的UI逻辑存在内在耦合
    -- 比如UI需要绑定事件(button a原生等等)
    -- 比如UI中需要展示数据状态, 在某些状态发生改变时, 有需要改变UI
  • 组合, 放到一个组件, Vue分离了, 看起来很清晰, 不灵活
  • 如果是单标签, 必须以/>结尾! 否则报错.
    
    image.png
    
    
    JSX语法小括号包裹起来任意换行, 看起来更清晰.png

  jsx中的注释

  • 比较特殊
  • HTML < !-- 注释 -->
  • jsx:

  //
  cmd + / 注释被渲染出来了
  => 
  {js表达式}
  {/* 我是一段注释 */}
  

  image.png

  JSX嵌入数据

  JSX嵌入数据.png
  • 在{}中可以正常显示的内容 String Number Array
  • 在{}中不能显示(忽略) null undefined Boolean
    test1: null,
test2: undefined,
test3: false,
  • 为什么不显示? React在设计的时候, 真是渲染内容时, 经常做一些判断, flag: true,三目运算符显示null还需要手动写成空字符串
  • 逻辑与 && flag && "你好啊"
  • 如何显示? 转换成字符串 String(null) this.state.test1 + ""
  • 对象不能作为jsx的子类, 放到jsx中展示

  friend: {
    name: "kobe",
    age: 40
  }
  

  JSX嵌入表达式

  • 对象的解构 ES6语法
    const {firstname, lastname } = this.state;
  • 运算符表达式

  • 三目运算符

    
    
    image.png
  • 进行函数调用

  getFullName() {
    // 不需要bind, 自己在调用
    // hooks不需要this, 社区沸腾
    // 很多还是用this, 类组件, 还是需要掌握, 蚂蚁金服开源的
    return this.state.firstname + " " + this.state.lastname;
  }
  

  ps: this公开课, 面试题的视频, 讲了两三个小时

  链接: https://pan.baidu.com/s/1cHkGsDF1xB9mxnsqcmSLAw 
  提取码: xnws
  这个视频里面，前3天讲的this
  

  coderwhy的React核心技术与开发实战课程链接

  

  少年~来做同学呀~.png