react模块化及类组件

一、react模块化

<MyComponent/>由babel翻译 自动调用函数MyComponent()

babel翻译时自动开启严格模式 严格模式自动禁止把this指向window 这时this指向的是undefined

<script type="text/babel">
    function MyComponent(){
        console.log(this);//undefined
        return <h1>我是h1</h1>
    }
    ReactDOM.render(<MyComponent/>,document.getElementById('test'))
</script>

二、React类组件

类的相关知识

构造器中的this指向：类的原型对象 供实例使用

一般方法放置位置：类的原型对象上，供实例使用

一般方法中的this指向主要看它怎么调用 call会改变this指向 这里会有两个undefined apply bind也会改变this指向

总结：

1、类中的构造器不是必须写的，要对实例进行一些初始化的操作，如添加指定属性时才写

2、如果A类继承了B类，且A类中写了构造器，那么A类构造器中的super是必须调用的

3、类中所定义的方法，都是放在了类的原型对象上

<script>
    // 创建一个person类
    class Person {
        // 构造器方法
        constructor(name, age) {
            // 构造器中的this指向：类的原型对象 供实例使用
            this.name = name
            this.age = age
        }
        speak() {
            // 一般方法放置位置：类的原型对象上，供实例使用
            // speak中的this就是Person实例对象
            console.log(`我叫${this.name},我今年${this.age}岁了`);
        }
    }
    console.log(88);
    let ls = new Person('李四', 18)
    ls.speak()
    //speak中的this指向主要看它怎么调用 call会改变this指向 
    //这里会有两个undefined  apply bind也会改变this指向
    ls.speak.call({ a: 1, b: 2 })
    console.log(ls);

    // 继承
    // class Students extends Person { }
    // let ww=new Students('王五',25)
    // ww.speak()
    class Students extends Person {
        constructor(name, age, grade) {
            super(name, age)//写在前面
            this.grade = grade
        }
        study() {
            console.log(`我叫${this.name}，我现在${this.grade}`);
        }
    }
    let zs = new Students('张三', 22, '大三')
    zs.speak()
    zs.study()
    console.log(zs);
</script>

改变this指向的方法

import ReactDOM from "react-dom";
import { Component } from "react";

class Findthis extends Component{
  state={name:'kiki'}
  showThis(){
    console.log(this.state.name);
  }
  showThisTwo=()=>{
    console.log(this.state.name);
  }
  render(){
    return (
      <>
      <h1>this指向问题</h1>
      <div>{this.state.name}</div>
      {/* 解决this指向问题： */}
      {/* 方法一：在事件处理程序中使用回调函数 */}
      <button onClick={()=>{this.showThis()}}>点击1</button>
      {/* 方法二：在写方法时直接回调 */}
      <button onClick={this.showThisTwo}>点击2</button>
      {/* 方法三：绑定bind改变this指向 */}
      {/* 注意：bind返回的是一个新函数 这个新函数才是一个事件处理函数 */}
      <button onClick={this.showThis.bind(this)}>点击3</button>
      </>
    )
  }
}
ReactDOM.render(<Findthis/>,document.getElementById('root'))

react类组件

点击切换文字

不能直接修改状态 需要借助React.Component父类的setState

class MyComponent extends React.Component{//**
    constructor(props){
        super(props)//**
        this.state={isHot:false}
        this.change=this.change.bind(this)//**
    }
    render(){
        const {isHot}=this.state
        console.log(isHot);
        return <h1 onClick={this.change}>我是{isHot?'洋洋':'咩咩'}</h1>//**
    }
    change(){
        let isHot=this.state.isHot
        //不能直接修改状态 需要借助React.Component父类的setState
        console.dir(this.setState);
        this.setState({isHot:!isHot})//**
}
}
console.dir(React.Component);
ReactDOM.render(<MyComponent/>,document.getElementById('test'))