react:基础语法与组件传参

react 特点

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

jsx 语法

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

1. 只有个根节点
2. {} js表达式
3. {/* 注释内容*/}
4. className定义类名
6. 样式对象会自动展开
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.函数组件没有生命周期
类组件有生命周期

模板语法

文本

// 普通文本
 <h1 className="active">你好react</h1>
// html文本
 <div dangerouslySetInnerHTML={_html:html文本内容}></div>

条件渲染

{flag&&<h1>为true显示</h1>}
{flag?'true显示':'false显示'}

列表渲染

{list.map(item=><h3 key={item}>{item}</h3>)}

事件

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

// 事件总是要响应一个函数
<h1 oncClick={()=>{ alert("abc")}}>

// 事件响应 箭头函数
doit = ()=>{ alert("你好")}

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

state

react组件的状态/数据
this.setState({k:新的值})
当state发生变化,引用state的视图会自动更新

表单的数据绑定

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


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

组件

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

组件传参示意图

定义组件

src/components/Steper.js

在App.js导入组件

import Steper from './components/Steper'

在App.js render函数中使用

<Steper></Steper>

组件传参

父传子 props

// 父组件传递
<Steper  num={5}>

// 子组件接收
props.num

默认参

Steper.defaultProps = {
    num:1
}

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

子传父

// 父组件 
// 定义函数并把函数传递给子组件
updateSize = (n)=>this.setState({size:n})  // 定义函数
<Steper updateSize={this.updateSize}>      // 传递给子组件

// 子组件
// 执行
props.updateSize()   // 相当于执行父组件的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节点