2. JSX核心语法一

类的定义

ES5 语法

// 注意不能用箭头函数，箭头函数没有this
function Person (name, age) {
  this.name = name
  this.age = age
}
Person.prototype.sayHi = function() {
  console.log(`hello ${this.name}`)
}
const p = new Person('jack', 18)
p.sayHi()

ES6 语法

class Person {
  constructor(name, age){
    this.name = name
    this.age = age
  }
  sayHi(){
    console.log(`hello ${this.name}`)
  }
}
const p = new Person('jack', 18)
p.sayHi()

this 问题

const p = new Person('jack', 18)
p.sayHi()  // 隐式绑定了this
let fn = p.sayHi
// fn()  // 报错
const obj = {
  name: 'rose'
}
// 方法一: call或apply
fn.call(obj)   // rose
// 方法二: bind
fn = fn.bind(obj)
fn()

继承

减少重复代码

class Person {
  constructor(name, age){
    this.name = name
    this.age = age
  }
  sayHi(){
    console.log(`hello ${this.name}`)
  }
}
class Student extends Person {
  constructor(name, age, grade) {
    super(name,age)  // constructor 必须调用父类
    // this.age = 111 可以重写属性
    this.grade = grade
  }
  study() {
    console.log('good good study')
  }
}
const lilei = new Student('lilei',18, 2)
console.log(lilei.age)
lilei.sayHi()

VSCode创建snippets

在VSCode中创建模板代码
使用 snippet generator 生成模板代码
复制粘贴到 File -> Preferences -> User Snippets

JSX案例: 打印电影列表

使用 for 循环

使用 for-in 遍历数组，得到的是 index
使用 for-of 遍历数组，得到的是 value

class App extends React.Component {
  constructor(){
    super()
    this.state = {
      movies: ['蜘蛛侠', '变形金刚', '奇异博士', '功夫']
    }
  }
  render(){
    let movieList = []
    for (let i of this.state.movies) {
      movieList.push(<li>{i}</li>)  // 注意数组里的不是字符串，而是JSX
    }
    return (
      <div>
        <h1>电影列表</h1>
        <ul>
          {movieList}
        </ul>
      </div>
    )
  }
}

使用 map 函数

map函数接受2个参数

• 回调函数：(item, index, array) => { }

• 给回调函数绑定的 this

  class App extends React.Component {
  constructor(){
    super()
    this.state = {
      movies: ['蜘蛛侠', '变形金刚', '奇异博士', '功夫']
    }
  }
  render() {
    return (
      <div>
        <h1>电影列表</h1>
        <ul>
          {this.state.movies.map(item => <li key={item}>{item}</li>)}
        </ul>
      </div>
    )
  }
  }

  JSX案例：计数器

  setState 是从 React.Component 继承的
  事件处理方法是React内部在调用，需要指定this, 否则为undefined

  class App extends React.Component {
  constructor(){
    super()
    this.state = {
      count: 0
    }
  }
  render(){
    return (
      <div>
        <h2>当前计数: {this.state.count}</h2>
        <button onClick={this.increment.bind(this)}>+1</button>
        <button onClick={this.decrement.bind(this)}>-1</button>
      </div>
    )
  }
  increment() {
    this.setState({
      count: this.state.count + 1
    })
  }
  decrement() {
    this.setState({
      count: this.state.count - 1
    })
  }
  }

  JSX语法

• JSX是JavaScript语法扩展(JavaScript XML)

• 用于描述UI界面，与JavaScript融合

  const element = <h1>Hello world</h1>

  JSX中的注释写法

  ```jsx {/ 这是注释正确写法 /}

{// 不能写成这样,后面的括号会被注释掉导致报错 }

<a name="AeABm"></a>
#### JSX 中显示数据类型和表达式
```jsx
class App extends React.Component {
  constructor(){
    super()
    this.state = {
      name: 'jack',
      age: 18,
      arr: ['a', 'b', 'c'],
      flag: true,
      n: null,
      u: undefined,
      obj: {
        name: 'jack',
        age: 18
      }
    }
  }
  render(){
    return (
      <div>
        {/* string, number, array 可以正常显示 */}
        {this.state.name}
        {this.state.age}
        {this.state.arr}
        {/* boolean, null, undefined 被忽略 */}
        {this.state.flag}
        {this.state.n}
        {this.state.u}
        {/* 将boolean, null, undefined 转化为字符串可显示 */}
        {this.state.flag.toString()}
        {this.state.n + ""}
        {this.state.u + ""}
        {/* 对象不能作为JSX的子项 */}
        {/* this.state.obj */}
        {/* 表达式 */}
        {this.state.flag ? <h2>hello</h2> : null}
        {this.state.flag && <h2>hello</h2>}
        {this.getInfo()}
      </div>
    )
  }
  getInfo(){
    return (<div>{this.state.name}</div>)
  }
}