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 (
      <div>
        hello world
        <hr />
        {this.state.num}
        <input type='text' value={this.state.num} onChange={(e)=>{
          this.changeValue(e) }}/>
      </div>
    )
  }
}

export default App;

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

属性变化

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

在JSX中使用表达式

• JSX本身也是表达式 let element = <h1>hello world</h1>
• 在属性中使用表达式 <MyComponent foo={1+2+3} />
• 延展属性 let props ={name: 'jack',age: 18} let info =<Greet {...props}/>
• 表达式作为子元素 let ele = <li>{props.message}</li>

改变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指向的新函数；