react

react的特点

01.组件化，单向数据流，生命周期，虚拟dom，hooks
02.facebook 脸书出品
03.构建用户界面的javascript库

react jsx语法

1. 只有个根节点
2. {} js表达式
3. {/* 注释内容*/}
4. className定义类名
6. 样式对象会自动展开
6. 数组可以包含html ,并自定展开
方便js中书写html模板,javascript与html混合写法

react的组件

01.函数组件：

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

02.类组件：

import React,{Componet} from 'react'

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

export default App

03.区别：

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

react模板语法

 react事件

01.和原生js事件一致 事件命名用驼峰式
onclick   onClick
onmouseover  onMouseover

02.事件总是要响应一个函数

03.<h1 oncClick={()=>{ alert("abc")}}>
事件响应 箭头函数

04.doit = ()=>{ alert("你好")}

<h1 onClick={this.doit}>
事件响应定义好的函数

05.事件传参：<h1 onClick={()=>{this.add(参数)}}>

                      <h2 onClick={this.add.bind(this,参数)}>

state

react组件的状态/数据
this.setState({k:新的值})

当state发生变化,引用state的视图会自动更新

react表单的数据绑定

<input  value={this.state.msg} onChange={this.changeMsg}>

changeMsg=e=>this.setState({msg:e.target.value})

react组件

01.定义组件 src/components/Steper.js

02.在App.js导入组件
    import Steper from './components/Steper'

   在App.js render函数中使用
  <Steper></Steper>

03.组件名称的首字母必须大写

react组件传参