简介

• react事facebook公司出品
• 用于创建用户界面的javas库
• React，Vue，Angular，jQuery

特点

• 组件思维
• 单向数据流
• 虚拟Dom节点

jsx语法

javascript嵌套使用html模板
01有且只有一个跟节点
02{}书写js
03class改成className
04数组可以包含html
05对象样式自动展开
06{/**/注释}

模板语法

文本

{str}
{2+3}
{str.split('').reverse().join('')}

html渲染

<p dangerouslySetInnerHTML={{__html:msg}}></p>

条件渲染

三目运算
	{条件？语句一：语法2}
        {score>=60?'及格':'不及格'}
&&
	 {flag&&<p>芝麻开门</p>}

列表渲染

运用了map函数
{list.map((item,index)=><p key={index}>{item}</p>)}

react组件的类型

函数组件

• 简单快捷

• 没有this

• 没有state数据

• 没有生命周期 没有this与state，降低了组件的耦合性组件的复用性与扩展性更强

  适用于展示类型"视图组件"

function App(){
  return(<div></div>)
}
export default App;

类组件

有this，state，生命周期
适用于集中处理数据的"容器组件"

import React, { Component } from "react";
class App extends Component {
     constructor(props) {
    super(props);
    this.state = { }；
  }
  render(){
    return(<div></div>)
        }
}

组件的数据状态state

state={num:5}
this.setState({num:10})