一. Javascript类的定义

JS语法补充

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开始才有的关键字

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

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

把三个东西放在本地, 本地引入
<script src="../react/react.development.js"></script>
...

编写React代码

<script type="text/babel">
  ReactDOM.render(要渲染的东西, document.getElementById("app"));
</script>

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

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

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

<ul>
  {
    
  }
</ul>

补充: 数组的高阶函数

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

<ul>
  {
    this.state.miveis.map((item) => {
      return <li>{item}</li>
    })
  }
</ul>

React的自主性会更强
v-for 指令
Vue有一个缺点, 使用的一个模板, 相似的组件不单独抽成一个组件, 不好复用
React只需要抽成一个变量, 更灵活, 各有好处

Vue模板.png

2. 计数器案例

计数器.png

体验React
每次创建都需要先引入三个文件, 比较多的重复的东西 => 搞一个公共的东西
之后只要是新创建一个文件快速生成一个代码 => 代码片段, VSCode创建代码片段

image.png

image.png
选择html片段
规则有点麻烦, 键值对, 描述, 对象, 前缀, body数组双引号写, 手动太麻烦 => 一个网站
转换网站
绑定事件<button onClick={.increment}>

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 <h2>Hello World</h2>

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

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

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

一. Javascript类的定义

JS语法补充

二. JavaScript类的继承

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

1. 电影列表

补充: 数组的高阶函数

2. 计数器案例

四. 认识JSX

1. 认识JSX的语法

为什么React选择了JSX?

jsx中的注释

JSX嵌入数据

JSX嵌入表达式

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