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