粗识react

react  特点:

单向数据流
生命周期
虚拟dom
hooks

jsx语法特点:

(方便js中书写html模板，javascript与html混合写法)

01 只有一个根节点
02 需要在{}写js表达式
03 {/* 注释内容*/}
04 className 定义类名
05 样式对象会自动展开
06 数组可以包含html,并自定展开

react组件
函数组件

function App() {
  return <div></div>
  }
  export default App;
 类组件

import React, { Component } from 'react';
class App extends Component {
    constructor(props) {
        super(props);
    }
    state = { num:5 }
    render() { 
        return ( <div></div> );
    }
} 
export default App;

区别:

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

普通         {文本内容}

html文本
 

 <div dangerouslySetInnerHTML={{__html:文本内容}}></div>
条件渲染

{flag&&<h1>为true显示</h1>}
{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 onClick={()=>{this.add()}}>
<h2 onClick={this.add.bind(this,参数)}>
 state

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

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

表单的数据绑定

 <input  value={this.state.msg} onChange={this.changeMsg}/>
 
 changeMsg = e=>this.setState({msg:e.target.value})
组件
定义组件

arc/components/Steper.js
  在App.js导入组件在App.js render 函数中使用

<Steper></Steper>
组件名称的首字母必须大写

参数传参

父传子 props
 父组件传递
 

<Steper num={5}></Steper>
 子组件接收
 

props.num
  默认参

Steper.defaultProps = {
    num:1
}
子传父，执行父组件传过来的props回调函数
子传父：执行回调函数
子传父

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

updateSize=(n)=>this.setState({size:n})
<Steper updateSize={this.updateSize}>
子组件：
执行props.updateSize()