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组件传参

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值