关于React之JSX语法理解
**理解:**javascript和HTML的结合，碰到<就按照HTML来解析，碰到{}就按照js来解析。也可以理解为可以在js代码书写HTML标签，每个标签最终都会转化为js代码来运行。
他的语法规则大致如下：
1、必须有根元素，即最外层有且只有一个标签；
2、所有的标签必须闭合；
3、对大小写敏感，区分是组件还是Html标签；
4、属性值必须加引号或者加{};
5、标签内放"<"会报错，因为他会按照Html来解析；
7、数组的循环（每个元素都会返回一个react组件）;
8、JSX允许让事件直接绑定在标签上。例如：行内样式必须使用{{}}，也就是说属性值不能是字符串，必须是对象的格式，属性名四驼峰试的。
对应解释
1:
render(){
return(
<div>
所有的页面内容都要在这个标签内书写，如果同级别再出现一个标签，会报错
</div>
)
}
1
2
3
4
5
6
7
3：
<Tab></Tab> //会被识别为一个组件，使用之前需要从对应的位置引用，否则会报错
<div></div> //被识别为一个Html标签
1
2
4：
<div className={} className="" style={{}}></div> //所有的属性都只有这两种格式
1
6：
data.map((item,index)=>{
return(
<li></li> //li标签相当于一个组件，此处li标签的同级不能放其他标签也是遵循JSX语法
)
})
1
2
3
4
5
7.关于事件绑定，通常使用的方式有三种，1、使用bind绑定；2、使用箭头函数；3、使用class属性的方式
1：
handleClick(){console.log(this)} //此处this打印结果就是该组件的实例，如下图
render(){
return(
<div onClick={this.handleClick.bind(this)}></div>
)
}
2:
handleClick(){console.log(this)} //此处this打印结果就是该组件的实例，如下图
render(){
return(
<div onClick={()=>this.handleClick()}></div>
)
}
3:
handleClick=()=>{console.log(this)} //此处this打印结果就是该组件的实例，如下图.要用箭头函数才行，否则找不到this
render(){
return(
<div onClick={this.handleClick}></div>
)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
区别：第一种、第二种，每次render都会重新绑定一次，且第二种参数需要传递两次；
第三种无法绑定参数，通常用于在组件之间的传递，子组件接收方式：this.props.handleClick就可以拿到。
第三种使用场景：例如：一个计步器是一个单独的组件，在不同的父组件中需要用到，可以使用
//父组件
export default class F_component extends Component{
state={
tepper:0,
}
changeStepper = (str)=>{
if(str==='red'){
this.setState({
stepper:this.state.stepper-1
})
}
if(str==='add'){
this.setState({
stepper:this.state.stepper+1
})
}
}
render(){
return(
<div>
<C_component stepper={this.state.stepper} changeStepper={this.changeStepper}/>
</div>
)
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
//子组件
export default class C_component extends Component{
transf=(str)=>{
this.props.changeStepper(str)
}
render(){
return(
<div>
<span onClick={this.transf.bind(this,"red")}>-</span>
<input value={this.props.stepper} onChange={()=>{}}/>
<span onClick={this.transf.bind(this,"add")}>+</span>
</div>
)
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
此处样式忽略，这样一个计步器，就可以在任何页面使用，同时，在父组件也可以拿到计步器当前的数值
注意：在子组件中如果直接通过this.props.changeStepper调用父组件的方法也可以，这样的话就需要传递两个方法过来，同时不能加()，否则会直接调用，从而报错。如果通过中间函数转换一次就可以保证功能的情况下书写简单。
