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回归nullclearTimeout(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;

装饰器配置：

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

第 3 节 JavaScript高阶函数的使用、v-model、组件化
第3节 JavaScript高阶函数的使用.v-model.组件化 JavaScript 高阶函数的使用 v-model v-model的使用和原理 v-model 结合 radio 类型使用 v-m ...
python四大高阶函数_详谈Python高阶函数与函数装饰器(推荐)
一.上节回顾 Python2与Python3字符编码问题,不管你是初学者还是已经对Python的项目了如指掌了,都会犯一些编码上面的错误.我在这里简单归纳Python3和Python2各自的区别. 首 ...
python高阶函数心得体会_Python高阶函数使用总结
Datawhale干货作者:皮钱超,厦门大学,Datawhale原创作者本文约2000字,建议阅读6分钟审稿人:耿远昊,Datawhale成员,华东师范大学,开源教程<Joyful-P ...
python使用高阶函数实现_18.python高阶函数
什么是高阶函数:一个函数可以作为参数传给另外一个函数(一个函数可以用来接收另一个函数作为参数),或者一个函数的返回值为另外一个函数(若返回值为该函数本身,则为递归),满足其一则为高阶函数.函数的形参位 ...
python四大高阶函数_Python里的高阶函数
1.map() 是 Python 内置的高阶函数,它接收一个函数 f 和一个 list,并通过把函数 f 依次作用在 list 的每个元素上,得到一个新的 list 并返回. def f(x): re ...
廖雪峰讲python高阶函数求导_高阶函数 - 廖雪峰的Python2.7教程 - 广州尚鹏
高阶函数英文叫Higher-order function.什么是高阶函数?我们以实际代码为例子,一步一步深入概念. 变量可以指向函数以Python内置的求绝对值的函数abs()为例,调用该函数用以下 ...
廖雪峰讲python高阶函数求导_高阶函数 · 廖雪峰的Python3.x教程 · 看云
[TOC] ### 引入高阶函数英文叫`Higher-order function`.什么是高阶函数?我们以实际代码为例子,一步一步深入概念. ### 变量可以指向函数以Python内置的求绝对值 ...
scala中的高阶函数_Scala中的高阶函数（HOF）
scala中的高阶函数 Higher Order Functions (HOF) in Scala are the very core of this functional programming l ...
什么是高阶函数，常见的高阶函数有哪些？
如果一个函数符合下面2个规范中任何一个,那该函数就是高阶函数 1.若a函数,接收的参数是一个函数,那么a就可以称之为高阶函数 2.若a函数,调用的返回值依然是一个函数,那么a就可以称之为高阶函数. ...