React高阶组件的应用

题图 From Bing By Clm

今天跟你们聊一聊React的高阶组件，那么什么是高阶组件呢？

若是一个函数 接受一个或多个组件做为参数而且返回一个组件 就可称之为 高阶组件。

高阶组件的本质就是一个函数，这个函数的参数是组件，这个函数的返回结果是一个组件。

咱们用一个案例来讲明，封装一个Mouse组件，这个组件实时获取鼠标的坐标并实时显示出来。

代码以下：

import React,{Component} from 'react';class Mouse extends Component { constructor(props) { super(props); this.state = { x:0, y:0 } } handleMouse=(e)=>{ this.setState({ x:e.clientX, y:e.clientY }) } render() { return <div onMouseMove={this.handleMouse} style={{ background:"red", height:"100px", width:"500px", }} > <h1>x:{this.state.x}</h1> <h1>y:{this.state.y}</h1> </div> }}export default Mouse;

显示结果：

代码很简单，在一个div上面监听鼠标的拖动事件，实时获取坐标，并将其显示出来，在此基础之上，咱们将其改形成高阶组件。

这里面须要明白几个问题，为何要改造呢？如何改造呢？

首先来搞清楚第一个问题：假如咱们的项目中有多个组件须要获取鼠标的坐标，有的组件只是显示，有的组件须要根据坐标来移动dom元素，咱们改如何作呢？简单直白的方法，直接copy上面的代码，修改代码，有多少组件须要实时获取鼠标坐标就copy修改几回。

这显然不是最好方案，咱们能够将获取鼠标坐标的逻辑抽离出来，构造一个高阶组件，那么如何构造呢？

再次重申一下高阶组件的定义：

若是一个函数 接受一个或多个组件做为参数而且返回一个组件 就可称之为 高阶组件。

咱们根据这个定义书写代码：

// 一、定义一个函数// 二、参数为组件function HOC(Comp){ //三、调用后，返回一个组件 return class extends Component{ constructor(props) { super(props); } render() { return <div> {/*二、参数为组件*/} <Comp/> </div> } }}

以上代码即是高阶组件最简单的代码结构，下面咱们来填充上面的代码，首先咱们要明白，高阶组件内部返回的组件的通用逻辑是什么呢？获取鼠标的移动坐标。

代码进一步完善以下：

import React,{Component} from 'react';
// 一、定义一个函数// 二、参数为组件function HOC(Comp){ //三、调用后，返回一个组件 return class extends Component{ constructor(props) { super(props); //四、保存鼠标坐标位置 this.state = { x:0, y:0 } } //五、鼠标移动获取新的位置坐标 handleMouse =(e)=>{ this.setState({ x:e.clientX, y:e.cclientY }) } render() {            return <div onMouseMove={this.setState}> {/*6将获取到的坐标传递给目标组件*/} <Comp x={this.state.x} y={this.state.y}/> </div> } }}

阅读源码：咱们在高阶组件的结构上增长了以下几个功能，定义state保存鼠标位置，监听鼠标移动事件获取新的坐标，将坐标传递给目标组件。

下面咱们完成目标组件，目标组件的做用主要是显示坐标。代码以下：

class Show extends Component{ constructor(props) { super(props); } render() { return <div> <h2>x:{this.props.x}</h2> <h2>x:{this.props.y}</h2> </div> }}

最终代码以下：

import React,{Component} from 'react';
// 一、定义一个函数// 二、参数为组件function HOC(Comp){ //三、调用后，返回一个组件 return class extends Component{ constructor(props) { super(props); //四、保存鼠标坐标位置 this.state = { x:0, y:0 } } //五、鼠标移动获取新的位置坐标 handleMouse =(e)=>{ this.setState({ x:e.clientX, y:e.clientY }) } render() { return <div onMouseMove={this.handleMouse}> {/*二、参数为组件*/} {/*6将获取到的坐标传递给目标组件*/} <Comp x={this.state.x} y={this.state.y}/> </div> } }}// 七、目标组件，主要做用是渲染显示坐标class Show extends Component{ constructor(props) { super(props); } render() { return <div> <h2>x:{this.props.x}</h2> <h2>x:{this.props.y}</h2> </div> }}// 八、将目标组件传递进入高阶组件，获得组件，此时新组件具备了获取鼠标坐标的能力let NewComponent = HOC(Show);export default NewComponent;

显示结果：

阅读最终代码，咱们发现，在构造目标组件时，这个组件须要接收高阶组件获取的鼠标坐标，而获取坐标后咱们将其作简单展现。

这里也能够根据这个坐标作一些其余的功能。好比根据坐标移动dom元素，那么就只须要构造一个新的组件，这个组件接收x，y坐标，而后根据坐标移动dom元素，最终代码以下：

import React,{Component} from 'react';// 一、定义一个函数// 二、参数为组件function HOC(Comp){ //三、调用后，返回一个组件 return class extends Component{ constructor(props) { super(props); //四、保存鼠标坐标位置 this.state = { x:0, y:0 } } //五、鼠标移动获取新的位置坐标 handleMouse =(e)=>{ this.setState({ x:e.clientX, y:e.clientY }) } render() { return <div onMouseMove={this.handleMouse}> {/*二、参数为组件*/} {/*6将获取到的坐标传递给目标组件*/} <Comp x={this.state.x} y={this.state.y}/> </div> } }}// 七、定于目标组件，接收x,y坐标参数function Move({x,y}){ return <div style={{ height:"100px", width:"100px", background:"yellow" }}> <div style={{ background:"red", height:"10px", width:"10px", position:"absolute", left:x, top:y }} > Move </div> </div>}//八、构造新的组件let NewComponent = HOC(Move);export default NewComponent;

案例完成了，总结一下：

一、高阶组件的本质就是一个函数

二、函数的参数为一个组件，一般这个组件会接收高阶组件传入的参数

三、函数调用后返回一个新的组件

四、高阶组件内部主要是将通用的功能逻辑抽离出来

高阶组件还有一些不足，好比说高阶组件存在组件嵌套的问题，咱们在下篇文章用一种新的方法来代替他。

以上即是高阶组件的使用方式，固然高阶组件还有好多其余的用法，若是你有什么其余的想法或建议，欢迎留言。

本文分享自微信公众号 - nodejs全栈开发（geekclass）。
若有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一块儿分享。