react-5 高阶函数 (HOC)（防抖节流） --- 高阶组件(HOF)（拖拽）

高阶函数hoc：高阶函数是对其他函数进行操作的函数

高阶组件hof：高阶组件即接受一个或多个组件作为参数并且返回一个组件，本质也就是一个函数，并不是一个组件 。把通用的逻辑放在高阶组件中，对组件实现一致的处理，从而实现代码的复用

高阶函数：指一类函数,防抖，节流

`防抖`： 短时间内频繁触发同一事件时，只有最后一次生效. 例如电梯关门的效果

`节流`： 短时间内频繁触发同一个事件时，在单位时间内，只生效一次。例如lol英雄的大招

 箭头函数每次触发都会执行一次。但是执行的不是debounce这个高阶函数返回的闭包函数。

所以：防抖节流不要箭头函数

//utils下tools.js工具

import React, { Component } from 'react';
// 高阶函数HOF：eg：防抖节流
// 防抖
export function debounce(func, time ) {
    var timerid = null;
    return function(){
        if (timerid) { //如果定时器存在，则销毁定时器
            clearTimeout(timerid)
        }
        // 创建新的定时器
        timerid = setTimeout(()=>{
            func()
        },time)
    }
}
// 节流
export function throttle(func, time){
    var timerid = null;
    return function(){
        if(!timerid){ //如果定时器不存在 则创建定时器
            // 创建新的定时器
            timerid = setTimeout(()=>{
                func();
                // 执行完会清除定时器，然后让timerid回归null
                clearTimeout(timerid)
                timerid = null
            }, time)
        }
    }
}

使用防抖节流

import React, { Component } from 'react';
import './App.css'
//导入工具
import {debounce,throttle} from './utils/tools'
// 
import A from './components/A'
import B from './components/B'
import C from './components/C'
class App extends Component {
  // 发请求了
  handleChange(){
    console.log("发送请求");
    
  }
  render() {
    return (
      <div className='app'>
        {/* 防抖演示：错误 */}
        {/* <input type="text" onChange={()=>{this.handleChange()}}/> */}
        {/* 防抖演示：正确 */}
        <input type="text" onChange={debounce(this.handleChange, 300) }/>
        <br />
        <br />
        <br />
        {/* 节流演示：错误 */}
        {/* <input type="text" onChange={()=>{this.handleChange()}}/> */}
        {/* 节流演示：正确 */}
        {/* <input type="text" onChange={this.handleChange}/> */}
        <input type="text" onChange={throttle(this.handleChange,200)}/>

        <A></A>
        <B></B>
        <C></C>
      </div>
    );
  }
}

export default App;

高阶组件：复用组件逻辑

高阶组件就是一个函数，它接收一个组件作为输入，然后返回一个新的组件作为结果，且所返回的新组件会进行相对逻辑增强

 拖拽

//utils下tools.js工具

import React, { Component } from 'react';


// 高阶组件（重用拖拽逻辑）
export function DragHOC(Com){
    return class tools extends Component{
        constructor(props){
            super(props);
            this.state = {top:0,left:0}
        }
        handleMouseDown(){
            // 鼠标移动时，获取鼠标的位置
            document.onmousemove = (e)=>{
                this.setState({left:e.pageX,top:e.pageY})
            }
            document.onmouseup = ()=>{
                document.onmousemove = null
            }
        }
        render(){
            return(
                <div onMouseDown={()=>{this.handleMouseDown()}} style={{position:'absolute',left:this.state.left + 'px',top:this.state.top + 'px'}}>
                    <Com />
                </div>
            )
        }
    }
}

使用

import React, { Component } from 'react';
import './A.css'
// 导入
import { DragHOC } from '../utils/tools';

class A extends Component {
    render() {
        return (
            <div className='a'>
                a组件
            </div>
        );
    }
}
// 使用
export default DragHOC(A);

装饰器配置才能使用@DragHOC：：：自行配置

抛出前处理一下组件 ，A,B,C三个组件

import React, { Component } from 'react';
import './A.css'

import { DragHOC } from '../utils/tools';

//以装饰器语法，应用高阶组件
@DragHOC
class A extends Component {
    render() {
        return (
            <div className='a'>
                a组件
            </div>
        );
    }
}

//export default DragHOC(A);
export default A;

 

装饰器配置：

1.

2.

3.

4.

5.