react 的高阶组件再理解-白红宇

react 的高阶组件再理解

阅读量：4086 次

发布时间：2019-05-25

本文共 3038 字，大约阅读时间需要 10 分钟。

写在前面的话

开始学习 react 的时候，有一个难点，高阶组件。

以前写过一篇不太成熟的文章，这里忙里偷闲再来详细的理解一下。

最出名的高阶组件就是 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.jsimport React, { Component } from 'react';function A(WrapperedComponent){    return class test extends Component{        return 
               
            
   
    }}export default A;// 其他组件使用的时候// B.jsimport A from './A';class B extends Component{    return 
   
            hello world!!    
   
}export default A(B)复制代码

高阶组件的使用

直接包裹 HOC(WrapperedComponent)

使用装饰器 @HOC
- 要 nom run eject（这里就不详细写了）
- 安装 babel 适配文件等

编写高阶组件

实现一个普通组件

函数包裹这个组件

一个简单的高阶组件 demo

需求：有三个页面 A,B,C 需要共用的一个进度条组件。

(这里是源码)

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 (        
             
            
   
      );    }  };}export default HOCprogress;复制代码

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

// HOCprogress.tsximport 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 (        
             
                
     
       {value} %
     
          
    
          
            
   
      );    }  };}export default HOCprogress;复制代码

添加 A,B,C三个文件

A.tsx

import React, { Component } from "react";// 引入高阶函数import HOCprogress from "./HOCprogress.tsx";class A extends Component {  render() {    return 
   
    这是 A 组件！
   
;  }}// 使用高阶组件包裹 A 组件export default HOCprogress(A, 56);复制代码

B.tsx

import React, { Component } from "react";import HOCprogress from "./HOCprogress.tsx";class B extends Component {  render() {    return 
   
    这是 B 组件！
   
;  }}// 我们可以使用 @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(){        
               
                
                
            
   
    }}const rootElement = document.getElementById("root");ReactDOM.render(
   , rootElement);复制代码