一、react的特点

1.构建用户界面的javascript库

2.由facebook脸书出品

3.react有组件化、单向数据流、生命周期、虚拟dom、hooks

二、jsx语法

1.定义：方便js中书写html模板JavaScript与html混合写法

2.jsx语法特点：

1. 需要在{}写js表达式
2. {/* 注释内容 */}
3. className添加 类名
4. 样式对象自动展开
5. 数组里面可以定义html标签,会自动展开
6. 有且只有一个根节点

三、react的组件

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

react组件有函数组件和类组件的区别:

1. 函数组件通常展示,类组件通常作为容器
2. 类组件可以有state，管理数据用类组件,函数组件没有state
3. 函数组件没有this,类组件有this
4. 函数组件没有生命周期,类组件有生命周期

四、模板语法

文本

1. 普通文本内容

{文本内容}

2. html文本

 <div dangerouslySetInnerHTML={{__html:str2}}></div>

条件渲染

 var isLog=false;
return (<div>
{isLog&&<h3>欢迎回来</h3>}
{isLog?<h3>欢迎回来小黑子</h3>:<h3>请登录</h3>}
 </div>)

列表渲染

var list =["react","vue","angular","jQuery"]
return (<div>
{
  list.map(item=>(<h3 key={item}>{item}</h3>))
}
</div>)

五、事件

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

onclick =>onClick
onmouseover=> onMouseover

添加事件

//直接添加
<p onClick={() => alert("文本内容")}>文本内容</p>

//先定义再执行
say = () => {
    alert("文本内容");
  };
<p onClick={this.say}>文本内容</p>

事件传参

 doit = (msg) => {
    alert("文本内容" + msg);
  };
<p onClick={() => this.doit("文本内容")}>传参内容-传参</p>

//使用bind传参
//基于doit返回一个新函数，新函数的this是bind的第一个参数，新函数的参数是bind第二个参数
<p onClick={this.doit.bind(this, "文本内容")}>传参内容-传参</p>

六、表单的数据绑定与state

react的表单绑定需要进行双向绑定

<input value={this.state.msg} onChange={this.changeMsg}>
changeMsg=e=>this.setState({msg:e.target.value})

state是react组件的状态/数据

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

//更新state的值需要
this.serState({k:新的值})

七、组件

1.react里定义组件

一般是在src/components/下方

2.在App.js导入组件

import Steper from './components/Steper'

3.在App.js render函数中使用

<Steper></Steper>

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

八、组件传参

父传子

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

//子组件接收
props.num

默认参数

Steper detaultProps ={
num:1
}

子传父

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

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

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

九、组件的设计

组件设计一般分为容器组件和视图组件

容器组件：

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

视图组件：

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

十、dom引用

1.导入创建dom引用的方法

import {createRef} from 'react'

2.创建dom引用

var inp = createRef()

3.引用

<input ref={inp}>

4.获取值

inp.current.value
//inp.current  当前引用的dom节点

十一、生命周期

react的生命周期可以分为三个阶段：挂载阶段、更新阶段、卸载阶段

挂载阶段可以分为

01 constructor 构造函数

 constructor(props) {
      super(props);
    //   console.log("挂载-01-constructor")
  }

02 static getDerivedStateFromProps

 static getDerivedStateFromProps(nextProps, prevState) {
    //当组件的props发生变化的时候，执行回调函数
    //当props更新Props更新state
    // console.log("挂载-02-getDerivedStateFromProps")
    return nextProps
  }

03 render 渲染函数

 render() {
    // console.log("挂载03-render选项")
    return (
      <div>
        <h1>生命周期</h1>
        <button onClick={()=>this.setState({num:this.state.num+1})}>{this.state.num}</button>
      </div>
    );
  }

04 componentDidMount 组件已经挂载

componentDidMount(){
    // console.log("挂载-04 组件已经挂载")
    // 作用：操作dom，发起ajax，添加事件，开启定时器
  }

更新阶段可以分为

01 static getDerivedStateFromProps

static getDerivedStateFromProps(nextProps, prevState) {
    console.log("更新:01-getDerivedStateFromProps")
    return nextProps
  }

02 shouldCompoentUpdate 组件是否更新(返回true才更新)

shouldComponentUpdate(nextProps,nextState){
    console.log("更新：02 组件是否需要更新")
    return true;//通常用做优化组件，返回true更新，false不更新
  }

03 render 渲染

render() {
    console.log("更新：03-render")
    return (
      <div>
        <h1>生命周期</h1>
        <button onClick={()=>this.setState({num:this.state.num+1})}>{this.state.num}</button>
      </div>
    );
  }

04 getSnapshotBeforeUpdate 更新前获取快照(返回值是componentDidUpdate第三个参数)

getSnapshotBeforeUpdate(prevProps,prevState){
    console.log("更新：04 getSnapshotBeforeUpdate")
    return {name:"mumu",age:17}
  }

05 componentDidUpdate 组件已经更新

 componentDidUpdate(prevProps,prevState,snap){
    console.log("更新：05 componentDidUpdate",snap)
  }

卸载阶段可以分为

componentWillUnmount

 componentWillUnmount(){
    console.log("组件将要卸载")
  }