React中的事件与JSX语法

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>
        )
    }
}