react-高阶组件-编程知识

react-高阶组件

一、什么是高阶组件

高阶组件（ Higher-Order Component，HOC ）是一个以组件作为参数，返回一个新组件的函数。

高阶组件最大的特点就是复用组件逻辑
高阶组件本身并不是 React 的 API，而是React组件的一种设计模式，一种组件重用的高级技巧
高阶组件是一个函数，接收要包装的组件，返回增强后的组件

二、如何实现一个高阶组件

高阶组件内部创建一个组件，在这个组件中提供复用的状态逻辑代码，通过props将复用状态传递给被包装组件 WrappedComponent

创建一个函数，命名以 with 开头
指定函数参数，参数为组件，所以参数应该以大写字母开头
在函数内部创建一个组件，提供复用的状态逻辑代码，并返回
在该组件中，渲染参数组件，同时将状态通过props传递给参数组件
调用该高阶组件，传入要增强的组件，通过返回值拿到增强后的组件，并将其渲染到页面中

function withMouse(WrappedComponent) {class Mouse extends React.Component {state = {x: 0,y: 0,}render() {return (<WrappedComponent {...this.state}></WrappedComponent>)}}return Mouse
}

const Position = props => (<div>鼠标位置： {props.x}, {props.y}</div>
)const MousePosition = withMouse(Position)<MousePosition />

三、高阶组件demo

代码

import React from 'react'/*** 高阶组件*/// 获取组件名
// function getDisplayName(WrappedComponent) {
// 	return WrappedComponent.displayName || WrappedComponent.name || 'Component'
// }// 创建高阶组件
function withMouse(WrappedComponent) {// 该组件提供复用的状态逻辑class Mouse extends React.Component {// 初始化statestate = {x: 0,y: 0,}// 渲染UI，可以将state和props 一起传递给组件render() {return (<WrappedComponent {...this.state} {...this.props}></WrappedComponent>)}// 组件挂载，监听鼠标移动componentDidMount() {window.addEventListener('mousemove', this.handleMouseMove)}// 组件卸载，移除监听componentWillUnmount() {window.removeEventListener('mousemove', this.handleMouseMove)}// 鼠标移动事件处理程序handleMouseMove = e => {this.setState({x: e.clientX,y: e.clientY,})}}// 设置displayName  这个为了调试区分用，可以不设置// Mouse.displayName = `WithMouse${getDisplayName(WrappedComponent)}`// 返回增强后的组件return Mouse
}// 位置组件，用来测试高阶组件
const Position = props => (<div><h2>鼠标位置: {props.x}, {props.y}</h2>MousePosition组件: 接收的参数 a == {props.a}</div>
)// 猫抓老鼠组件，用来测试高阶组件
const Cat = props => (<div><imgsrc={require('../../assets/images/cat.png')}alt="猫"height="22px"style={{position: 'absolute',top: props.y - 10,left: props.x - 10,}}/>MouseCat组件: 接收的参数 a == {props.a}</div>
)// 获取增强后的组件
const MousePosition = withMouse(Position)
const MouseCat = withMouse(Cat)// 使用
class MouseHigher extends React.Component {// 渲染增强后的组件render() {return (<div><MousePosition a="111"></MousePosition><MouseCat a="222"></MouseCat></div>)}
}export default MouseHigher