// 使用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指向的新函数；
