react 的高阶组件再理解

• 开始学习 react 的时候，有一个难点，高阶组件。
• 以前写过一篇不太成熟的文章，这里忙里偷闲再来详细的理解一下。
  • juejin.im/post/5b5146…
• 最出名的高阶组件就是 redux 状态管理的 connect 组件。大家可以取看一看实现的源码。
  • github.com/lipeishang/…

高阶函数的基本概念

想要理解高阶组件，我们先来看看高阶函数的含义。

• 函数可以作为参数被传递

setTimeout(() => {
    console.log(1)
},1000)
复制代码

• 函数可以作为返回值输出

function foo(x){
    return function(){
        return x;
    }
}
复制代码

• 类似于 setTimeout() , setInterval() 就是普通的高阶函数。

setTimeout()
setInterval()

// ajax
$.get('/api/v1',function(){
    console.log('data')
})
复制代码

上面这两个就是标准的高阶函数

高阶组件 high order component ，简写 HOC

-（原来以前的 HOC 就是高阶组件）

高阶组件理解和使用

• 和高阶函数一样，需要函数去包裹一个组件，返回的是一个组件而已

// A.js
import React, { Component } from 'react';
function A(WrapperedComponent){
    return class test extends Component{
        return <div>
            <WrapperedComponent />
        </div>
    }
}

export default A;

// 其他组件使用的时候
// B.js
import A from './A';

class B extends Component{
    return <div>
        hello world!!
    </div>
}
export default A(B)
复制代码

高阶组件的使用

• 直接包裹 HOC(WrapperedComponent)
• 使用装饰器 @HOC
  • 要 nom run eject（这里就不详细写了）
  • 安装 babel 适配文件等

编写高阶组件

• 实现一个普通组件
• 函数包裹这个组件

一个简单的高阶组件 demo

• 需求： 有三个页面 A,B,C 需要共用的一个进度条组件。
• codesandbox.io/s/rj3r509lj… (这里是源码)

HOCprogress.tsx(1)

import React, { Component } from "react";

// 然后包裹一个 function，用WrapperedComponent传入 class 的 render()中。

function HOCprogress(WrapperedComponent, value: number) {

//先写 class 
  return class hocForm extends Component {
    render() {
      return (
        <div>
          <WrapperedComponent />
        </div>
      );
    }
  };
}

export default HOCprogress;

复制代码

• 优化一下，添加简单的进度条

// HOCprogress.tsx
import React, { Component } from "react";

function HOCprogress(WrapperedComponent, value: number) {
  return class hocForm extends Component {
    render() {
    
    // 添加样式 
      const innerStyle = {
        width: "100%"
      };
      const percentStyle = {
        width: `${value}%`,
        height: "20px",
        background:
          "url(https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2440333743,1684406640&fm=26&gp=0.jpg)"
      };

      return (
        <div>
          <div style={innerStyle}>
            <div style={percentStyle}> {value} %</div>
          </div>
          <WrapperedComponent />
        </div>
      );
    }
  };
}

export default HOCprogress;
复制代码

• 添加 A,B,C三个文件

A.tsx

import React, { Component } from "react";
// 引入高阶函数
import HOCprogress from "./HOCprogress.tsx";

class A extends Component {
  render() {
    return <div>这是 A 组件！</div>;
  }
}
// 使用高阶组件包裹 A 组件
export default HOCprogress(A, 56);

复制代码

B.tsx

import React, { Component } from "react";
import HOCprogress from "./HOCprogress.tsx";


class B extends Component {
  render() {
    return <div>这是 B 组件！</div>;
  }
}

// 我们可以使用 @HOCprogress 装饰器这样的方式来替代函数包裹这种方式具体的见我的装饰器的那篇文章。
export default HOCprogress(B, 98);

// C.tsx 同上
复制代码

index.ts

import React from "react";
import C from "./C.tsx";
import B from "./B.tsx";
import A from "./A.tsx";

class App extends React.Component {
    render(){
        <div>
            <A />
            <B />
            <C />
        </div>
    }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
复制代码

最后来看看效果

写在最后

• 当然高阶组件有非常多的用法还可以去了解和学习，这里只是粗浅的入门了解。
• 可以在代理模式中，去
  • 操作 props
  • 抽取组件状态
  • 访问 ref
  • 包装组件

参考

• 装饰器 juejin.im/post/5b5144…
• imooc www.imooc.com/video/18257