第二章 React基础

2.1 JSX基本语法

1、基本语法：成对的标签构成一个树状结构的数据。
2、标签类型：小写字母表示DOM类型标签，大写的表示React类型标签。
3、JavaScript表达式：jsx中使用JavaScript表达式，用大括号括起来，表达式在jsx中使用的场景主要有两个：通过表达式给组件赋值，通过表达式定义子组件。
JSX只能使用JavaScript表达式，不能使用多行的JavaScript语句、但是可以使用三目运算符或逻辑与&&代替if
4、DOM标签支持的属性，JSX也都支持，只不过，部分属性会有调整，class变成className，时间都成了驼峰，onclick变成了onClick、自定义的React组件，可以任意自定义标签属性名。
5、{/* */} 注释

2.2 组件

2.5 事件处理

React中绑定事件有两点：

注意：DOM事件 ie的是这么个 但是标准浏览器 还是调用e..preventDetault()

React中最容易错的是时间处理函数中的this指向问题，因为ES6 class并不会为方法自动绑定this到当前对象。
this指向问题：
1、使用箭头函数

render(){
    return(<button onClick={(event)=>{console.log(this.state.number);}}>按钮</button>)
}

但是如果事件逻辑复杂，这么写就很臃肿了。把逻辑封装成一个方法，然后在箭头函数中调用这个方法

render(){
    return(<button onClick={(event)=>{this.handleClick(event)}>按钮</button>)
}
handleClick(event){
    //这里定义函数体
}

直接在render方法中为元素事件定义事件处理函数，最大的问题是，每次render调用，都会重新创建一个新的时间事件处理函数。

2、使用组件的方法
直接将组件的方法赋值给元素的事件属性，同时在类的构造函数中，将这个方法的this绑定到当前对象、

class MyComponent extends React.Component{
    constructor(props){
        super(props);
        this.state = {number:0}
        this.handleClick = this.handClick.bind(this)
    }
}
handleClick(event){
    //这里定义函数体
}
render(){
    return(<button onClick={this.handleClick}>按钮</button>)
}

但是这么每次在构造函数里面写定义，很烦，于是就有下面这样写的：

class MyComponent extends React.Component{
    constructor(props){
        super(props);
        this.state = {number:0}
    }
}
handleClick(event){
    //这里定义函数体
}
render(){
    return(<button onClick={this.handleClick.bind(this)}>按钮</button>)
}

使用bind会创建一个函数，因此每次render都会创建一个新函数。但是需要为处理函数传递额外参数时候，这种写法就有用武之地，比如需要为时间handleClick传入参数item

class MyComponent extends React.Component{
    constructor(props){
        super(props);
        this.state = {
           List:[1,2,3,4],
           current:1
        }
    }
}
handleClick(event){
    this.setState({
        current:item
    })
}
render(){
    return(
        <ul>
            {this.state.list.map(
                    (item)=>(
                       //bind除了绑定this，还绑定item作为参数。提供handleClick使用
                       {<li className={this.state.current === item ? 'current' : ' '
                                    onClick = {this.handleClick.bind(this,item)}>{item}
                       </li>}
            )
            )}
        </ul>)
}

3.属性初始化语法
ES7属性初始化自动为class中定义的方法绑定this、

class MyComponent extends React.Component{
    constructor(props){
        super(props);
        this.state = {number:0}
    }
}
//这里是重点，实际上也是用了箭头函数
handleClick=(event)=>{
    //这里定义函数体
}
render(){
    return(<button onClick={this.handleClick}>按钮</button>)
}