认识 React

特点

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

jsx语法

方便js中书写html模板JavaScript与html混合写法
jsx语法特点
01需要在{}写js表达式
02 {/* 注释内容 */}
03 className添加 类名
04 样式对象自动展开
05 数组里面可以定义html标签,会自动展开
06 有且只有一个根节点

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.函数组件没有生命周期
类组件有生命周期

模板语法

文本
1.普通
{文本内容}
2. html文本
<div dangerouslySetinnerHTML==({__html})>
条件渲染
1.{flag&&<h1>为true显示</h1>}
2.{flag?"true显示":"false显示"}
列表渲染
{list.map(item)=><h3 key={item}>{item}</h3>}

事件

和原生js事件一致 事件命名用驼峰式

	onclick =>onClick
	onmouseover=> onMouseover

事件总是要响应一个函数

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

doit=()=>{alert(“你好”)}
<h1 onClick=(this.doit)></h1>
事件响应定义好的函数

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

state

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

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

表单的数据绑定

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

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

组件

1.定义组件
src/components/Steper.js
2. 在App.js导入组件
import Steper from ‘./components/Steper’
在App.js render函数中使用
<Steper></Steper>
3. 组件名称的首字母必须大写

参数传参

父传子props

父组件传递
	<Steper num=5>
		
	子组件接收
	props.num

默认参数

Steper detaultProps ={
num:1
}

子传父,执行父组件的传递过来的props回调函数
子传父:执行回调函数

子传父

父组件
定义函数并把函数传递给子组件

	updateSize = (n)=>this.setState({size:n})
	<Steper updateSize={this.updateSize}>

子组件

	执行props.updataSize()
	相当于执行父组件的updateSize方法

组件的设计

容器组件

	一个页面,一个容器
	有state,处理state方法
	数据中心,与数据处理组中心
	类组件

视图组件

	显示内容,一个试图组件
	只有props没有state
	函数组件

dom引用

1.导入创建dom引用的方法
import {createRef} from ‘react’
2.创建dom引用
var inp = createRef()
3.引用
<input ref={inp}>
4.获取值
inp.current.value
inp.current 当前引用的dom节点