jsx

// 使用jsx的时候必须引入react
// 组件要继承react.component
// react单向数据流，通过在view中的操作改变数值状态，通过view的方法改变内存中的数值，然后改变view的数值
import React, {Component} from 'react';

class App extends Component {
  constructor(){
    super();
    // 初始化组件的属性
    this.state={
      num: 3
    }
  }
  changeValue(e){
    console.log(e.target.value)
    this.setState({
      num: e.target.value
    })
  }
  render(){
    // 保证一个根节点
    return (
      

        hello world
        

        {this.state.num}
        {
          this.changeValue(e) }}/>
      
    )
  }
}

export default App;

input的onChange事件中使用箭头函数，是因为箭头函数中的this指向与上层保持一致
或者也可以在constructor中使用bind来初始化函数的this指向
this.changeValue=this.changeValue.bind(this)

属性变化

class样式改为className
for改为htmlFor
自定义组件大写开头

在JSX中使用表达式

• JSX本身也是表达式 let element =

  hello world

• 在属性中使用表达式
• 延展属性 let props ={name: 'jack',age: 18} let info =
• 表达式作为子元素 let ele =
• {props.message}

改变this指向的3种方式的异同点

（1）、call ：

应用：操作伪数组，Note:原型对象上的方法可以单独拿出来使用

eg：Array.prototype.push.call(object,30);

调用函数、改变this指向；

第一个参数：设置this指向；其他为函数的参数；

返回值是函数的返回值；

（2）、apply ：

应用 Math.max.apply(null,arr);查找数组的最大值

调用函数、改变this指向；

只有两个参数，第一个参数：设置this指向；第二个参数是数组，数组内为函数的参数

返回值是函数的返回值；

（3）、bind：

改变this指向，不会调用函数，需要重新调用；

第一个参数：设置this指向；其他为函数的参数；

返回值：改变this指向的新函数；