这是我参与「第四届青训营 」笔记创作活动的第5天

React一些语法

JSX语法糖

JSX是JS的语法扩展，运用在React框架中，格式很像模板语言，但实际上完全是javascript内部实现。 【语法糖】：也就是糖衣语法，由英国计算机科学家彼得·约翰·兰达发明的术语，指计算机语言中添加某种语法，语法对语言本身没有任何影响，这样更方便程序使用；通常使用语法糖能够增加程序的可读性，减少程序代码出错的机会。

一些函数名称的改变

由于js与jsx中相当于xml语法之间的冲突，因此xml中一些属性名需要为js中的函数名做出让步

• for -> htmlFor
• class -> className
• style= -> style={{}} 双花括号原因：里面写js第一层花括号必加的，第二个花括号其实是里面的内容是对象的原因

JSX必须被一个根元素包括起来或者被

<>
    code
</>

2.注释问题：

{/* */}
/*本质上理解就是花括号代表内部是js代码，里面的部分代表注释内容*/

三元运算符

在style里可以使用三元运算符进行选择性显示

<div style={{backgroundColor : flag ? 'pink' : 'blue'}}>
</div>

循环演示

<ul>
    {
        // react中的列表循环有且只有map可以使用
        // 只有map才有返回值，forEach没有，forEach方法不能返回执行结果，而是undefined
        arr.map((item, index)=>{
            return <li key={index}>{item}</li>
        })
    }
</ul>

代码的简写

如果只返回一行代码的时候，可以直接在=>箭头函数后面加上返回的代码，return就可以简写忽略掉

累加与setState

import React, { Component } from 'react'

let num = 1;

export default class App2 extends Component {
  render() {
    return (
        <div>
            <div>数字为：{num}</div>
            <button onClick={()=>num++}></button>
        </div>
    )
  }
}

// wx小程序中
// this.data.num = xxx;
// 是不能够触发视图的更新的
// 只有this.setData()才能触发视图的更新

因此出现了state： state -> setState data -> setData

import React, { Component } from 'react'

export default class App2 extends Component {
    state = {
        num: 1
    }
  
    render() {
    return (
        <div>
            <div>数字为：{this.state.num}</div>
            <button onClick={() => this.setState({num: this.state.num+1})}></button>
        </div>
    )
  }
}

通过上面的代码就可以实现点击按钮进行数据累加