React语法与组件

一、语法格式

1、jsx语法

采用JavaScript混合xml(html)语法格式，目的是为了更好地在JavaScript中写html模板

2.特点：

只有一个根节点

{}里面写JavaScript

数组可以直接写html标签

对象样式自动展开

   注释使用{/* */}

类名用className

二、模板语法

1、文本渲染{}

2、html文本渲染

dangerouslySetInnerHTML={{__html.xml:xxx}}

3、条件渲染

  三元运算符      条件？<>:<>

  &&符号     {{条件&&<>}}

4、列表渲染

   this.state.list.map(item=><h3 key={item}>{item}</h3>)

三、组件

1、函数组件（无状态组件或视图组件）

代码如下：

 function App{
      return(<>节点</>)

}

export default App;

2、类组件（有状态组件或容器组件）

代码如下：

import React,{Component} from 'react'

export default class App extends Component{

     render(){
         return(<>节点</>)}

}

补充：

一、事件

1、和普通事件一致，需要驼峰式写法

onClick={this.sayHi}

onClick={()=>{this.sayHi(参数)}}

onClick={this.sayHi.bind(this，参数)}

二、更新状态State

this.setState({k:v})

this.setState({k:v}.()=>console.log("执行完毕的回调函数"))