react基础语法

react特点

1.构建用户界面的javascript库
2.组件化、单向数据流、生命周期、虚拟dom、hooks

jsx语法

方便js中书写html模板,javascript与html混合写法

1. 只有个根节点
2. {} js表达式
3. {/* 注释内容*/}
4. className定义类名
5. 样式对象会自动展开
6. 数组可以包含html ,并自定展开

react的组件

函数组件

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

类组件

import React,{
   Componet} from 'react'

class App extends Componet {
   
    constructor(props){
   
        super(props)
    }
    state = {
   num:5}
   render(){
   
      return <div></div>
   }
}

export default App

函数组件和类组件的区别

1. 函数组件通常展示、类组件通常做为容器
2. 类组件可以有state,管理数据用类组件，函组件没有state
3. 函组件没有this，类组件没有this
4. 函数组件没有生命周期，类组件有生命周期

模板语法

文本

普通文本：{文本内容}
html文本：

<div dangerouslySetInnerHTML=={
   {
   __html:html文本内容}}>

条件渲染

{
   flag&&<h1>为true显示</h1>}
{