react学习笔记-03

目录

请求数据

axios

安装

使用

fetch

安装

使用

React.Fragment

懒加载

Portal

高阶函数 | 高阶组件

---

请求数据

---

axios

安装

npm i axios

使用

import Axios from 'axios';

Axios.post('http://localhost:7070/list',{},{
            headers:{
                "Content-Type":"application/json"
            }
        }).then((res)=>{
            console.log(res);
            this.setState({
                list:res.data
            })
        }).catch((err)=>{
            console.log(err);
        })

Vue axios 前端接口请求封装（基础）_哔哩哔哩_bilibili

拦截器 | Axios 中文文档 | Axios 中文网Axios API | Axios 中文文档 | Axios 中文网

vue项目中axios的封装_阳光-CSDN博客_vue项目axios封装

fetch

安装

npm i whatwg-fetch

使用

        const that = this;
        fetch('http://localhost:7070/list',{
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            }
        }).then(function(response) {
                return response.json()
            }).then(function(json) {
                // 这里才能拿到数据
            that.setState({
                list:json
            })
        }).catch(function(ex) {
            console.log('parsing failed', ex)
        })

whatwg-fetch - npm

React.Fragment

---

<React.Fragment>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</React.Fragment>

// 简写
<>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</>

//编译结果：
  <li>1</li>
  <li>2</li>
  <li>3</li>

懒加载

---

const StudentList = React.lazy(()=>import('./StudentList'));

<StudentList/>

//或者
import {Suspense}from 'react';

        <Suspense fallback={<div>Loading</div>}>
            <StudentList/>
        </Suspense>

Portal

---

 Portal 提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的优秀的方案。

// 模态框，子组件
funtion ZheZhao(){
	return <div  className='zheZhao'>
                   展示信息
	       </div>
}

exports default ZheZhao;

//父组件
function StudentList(){
	return (<>
                 <button>添加</button>
	        </>)
}
ReactDOM.createPortal(<ZheZhao>, document.body)

react portal - 简书

高阶函数 | 高阶组件

---

HOF : higher order function 高阶函数
定义：一个函数可以接收另一个函数作为参数，这种函数就称之为高阶函数

HOC: higher order component高阶组件
一个组件可以接收另一个组件作为参数，这种组件就称之为高阶组件。
高阶组件（HOC）是 React 中用于复用组件逻辑的一种高级技巧。
具体而言，高阶组件是参数为组件，返回值为新组件的函数。

组件画分：UI 组件，ui组件。容器组件，处理逻辑

例子：登录和注册组件复用太高。

//公共组件   容器组件
import React, {Component} from 'react';

export default (WrapperComponent)=>{
    return class Hoc extends Component{
        constructor() {
            super();
            this.state={
                user:'',
                pwd:'',
                rePwd:''//确认密码
            }
        }
        //onChange事件
        onChange =(type,value)=>{
            this.setState({
                [type]:value
            })
        }
        handleChange = (e,type)=>{
            this.onChange(type,e.target.value);
         }
        //处理提交
        handleSubmit=(e)=>{
            let {user,pwd,rePwd} = this.state;
            //如果存在确认密码
            rePwd? console.log("用户名：",this.state.user,"密码：",this.state.pwd,"确认密码:",this.state.rePwd)
             :console.log("用户名：",this.state.user,"密码：",this.state.pwd);
         }
         render() {
            let Method= {
                handleChange:this.handleChange,
                handleSubmit:this.handleSubmit
            }
            return (<div>
                <WrapperComponent {...this.state} {...Method}/>
            </div>)

         }
    }
}

//登录页面      UI组件
import withHoc from './Hoc'
import React from "react";

function Login(props) {
    let {user,pwd,handleChange,handleSubmit} = props;
   return (

       <div>
          <h2>登录UI</h2>
           <p>用户名 <input type="text" value={user} placeholder='用户名'
                         onChange={(e)=>handleChange(e,'user')}/></p>
           <p>密码 <input type="text" value = {pwd} placeholder='密码'
                        onChange={(e)=>handleChange(e,'pwd')}/></p>
           <p><button onClick={ (e)=>handleSubmit()}>登录</button></p>
       </div>
   )
}

export default withHoc(Login)