React 使用 JSX 来替代常规的 JavaScript。JSX 是一个看起来很像 XML 的 JavaScript 语法扩展，在React中会被babel编译为JavaScript。
JSX的特点
- JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
- 它是类型安全的，在编译过程中就能发现错误。
- 使用 JSX 编写模板更加简单快速。
React中调用变量,三元运算符,和循环
import React,{Component} from 'react' /* 导入{Component} 后extends 可以直接使用Component,不需要React.Component */
let txt = '一段文字'
let sex = 0;
let arr = ['段誉','王语嫣','虚竹']
export default class App2 extends Component{
render(){
return(
<div>
<p>{txt}</p> {/* 使用外面的变量需要用{}包裹(一般是定义在this.state) */}
<p>{sex===0 ? '小明' : '小红'}</p> {/* 三元运算符会期望使用=== 否则就报提示:Expected '===' and instead saw '==' eqeqeq*/}
<ul>
{
arr.map((item,index)=>{
return <li key={index}>{item}</li> /*使用for会报错 使用map循环出li,li中期望绑定一个key值,可以用唯一值来绑定 */
})
}
</ul>
</div>
)
}
}
React中的事件触发
import React, { Component } from 'react' //React中的事件与存放数据
// import './demo.css'
export default class app3 extends Component {
constructor(props){ //数据需要放在constructor(){}的this.state,是一个对象,对象里面存放数据
super(props) //必须使用super超类接收一个自命名名参数(一般使用props)
this.state = {
num:30
}
}//不需要加逗号隔开否则报错
add(){
this.setState({ //微信小程序里的setData就是借鉴这种修改数据的方式
num:this.state.num+1 //实现加一不是使用this.state.num +=1或者++,而是直接加一,否则会发生赋值,React中不能通过这种操作修改this.state中的数据
})
}
sayHi(){
console.log('嗨,你好')
}
render() {
return (
<div>
<p>{this.state.num}</p>
<button onClick={this.sayHi}>按钮</button> {/* 事件需要使用on开头的驼峰式写法={表达式},Vue.js里是@事件='表达式' */}
<button onClick={this.add.bind(this)}>加一</button> {/* 方法后面需要加.bind绑定(this,参数) ,否则方法里的setState是找不到this的,或者使用箭头函数()=>this.方法(参数)*/}
</div>
)
}
}
