react 的高阶组件再理解

今日猫片

优化一下 blog 界面，准备每次写都给你们看一张猫片（大雾）。

写在前面的话

• 开始学习 react 的时候，有一个难点，高阶组件。
• 之前写过一篇不太成熟的文章，这里忙里偷闲再来详细的理解一下。
  • 高阶组件代理模式
• 最出名的高阶组件就是 redux 状态管理的 connect 组件。你们能够取看一看实现的源码。
  • redux connect 实现源码。

高阶函数的基本概念

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

• 函数能够做为参数被传递

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… (这里是源码)

-- index.ts
-- /src
---- HOCprogress.tsx
---- A.tsx
---- B.tsx
---- C.tsx

复制代码

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 = {
        padding:'10px',
        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 style={innerStyle}>
            <div style={percentStyle}> {value} %</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