React学习日记4

014-015 react中的事件绑定和this指向

通过ComponentReact 可以查看组件里面的状态

react中绑定函数，要用花括弧把函数名传给onClick , react中所有的标签属性名都需要驼峰

<script type="text/babel">
    // 1. 创建组件
    class Weather extends React.Component{
      constructor(props){
        super(props)
        // react要求我们使用 对象表示state
          this.state = {
            isHot:false,
          }
      }
      render(){
        //读取状态
        const {isHot} = this.state 
        //react中绑定函数，要用花括弧把函数名传给onClick  , react中所有的标签属性名都需要驼峰
        return <h2 onClick = {demo}>今天好{isHot?'炎热':'凉爽'}</h2>
      }
    }
    //2. 渲染组件
    ReactDOM.render(<Weather/>,document.getElementById('test'))

    function demo(){
      console.log('被点击');
      //console.log(this.state); 通过Babel渲染拿不到window，这个里面指向undefined
    }

<script type="text/babel">
    // 1. 创建组件
    class Weather extends React.Component{
      constructor(props){
        super(props)
        // react要求我们使用 对象表示state
          this.state = {
            isHot:false,
          }
      }
      render(){
        const {isHot} = this.state  //读取状态
        //react中绑定函数，要用花括弧把函数名传给onClick  , react中所有的标签属性名都需要驼峰
        return <h2 onClick = {this.changeWeather}>今天好{isHot?'炎热':'凉爽'}</h2>
      }
       changeWeather(){
        //changeWeather放在了weather原型上，所以changeWeather的this指向Weather实例
        console.log('被点击');
        //console.log(this.state.isHot); this会丢失 这个里面的this是undefined
        //由于changeWeather是作为onClick的回调，所以不是通过实例调用，是直接调用
        // 类中的方法默认开启了局部严格模式，所以changeWeather中的this为undefined 
      }
    }
    //2. 渲染组件
    ReactDOM.render(<Weather/>,document.getElementById('test'))

016 解决类中的this指向

在类中定义方法时加入一个方法，使原型链上的this通过bind改变指向实例本身，这样在onClick传递的回调函数中就不会指向undefined

class Weather extends React.Component{
      constructor(props){
        super(props)
          this.state = {
            isHot:false,
          }
          this.changeWeather = this.changeWeather.bind(this) //实例对象自身多了个方法， 构造器中this就是实例对象
      }
      render(){
        const {isHot} = this.state 
        return <h2 onClick = {this.changeWeather}>今天好{isHot?'炎热':'凉爽'}</h2>
      }
       changeWeather(){
        console.log(this.state);
        console.log('被点击');
      }
    }
    //2. 渲染组件
    ReactDOM.render(<Weather/>,document.getElementById('test'))

017 setState中的使用

react中数据不能直接更改【和Vue区分开】

需要借助一个内置API去更改setState

构造器调用几次 --构造器只会执行一次【只生成了一个Weather实例】

render调用几次 --1+n次 1是初始化的那次，n是状态更新的次数

// 1. 创建组件
    class Weather extends React.Component{
      //构造器调用几次 --构造器只会执行一次【只生成了一个Weather实例】
      constructor(props){
        super(props)
          this.state = {
            isHot:false,
            wind:"微风"
          }
          this.changeWeather = this.changeWeather.bind(this) 
      }
      //render调用几次 --1+n次 1是初始化的那次，n是状态更新的次数
      render(){
        const {isHot,wind} = this.state 
        return <h2 onClick = {this.changeWeather}>今天好{isHot?'炎热':'凉爽'},{wind}</h2>
      }
       changeWeather(){
        //this.state.isHot = !this.state.isHot 这里改不出来，因为不是双向绑定。如果是Vue就可以
        this.setState({isHot:!this.state.isHot}) //状态更新必须通过setState
      }
    }
    //2. 渲染组件
    ReactDOM.render(<Weather/>,document.getElementById('test'))

---

018 state的简写方式—019 总结state

类中可以直接写赋值语句

class Car{
  constructor(name){
    this.name = name
  }
  price = 199 //直接在类中赋值语句  等同于在构造器中this.price = 199
}

// 1. 创建组件
    class Weather extends React.Component{
      // 初始状态 
      state = {
            isHot:false,
            wind:"微风"
          }  
      render(){
        const {isHot,wind} = this.state 
        return <h2 onClick = {this.changeWeather}>今天好{isHot?'炎热':'凉爽'},{wind}</h2>
      }
      //使用赋值的方式把方法放在了自己实例上  使用箭头函数其中的this指向的是实例对象
      // 自定义方法--要用复制语句的形式+箭头函数
       changeWeather = ()=>{
         console.log(this);//指向实例对象
        this.setState({isHot:!this.state.isHot}) //状态更新必须通过setState
      }
    }