react 的高階組件再理解

時間 2019-12-02

標籤 react 高階組件理解欄目 React 简体版

原文原文鏈接

今日貓片

優化一下 blog 界面，準備每次寫都給你們看一張貓片（大霧）。javascript

寫在前面的話

開始學習 react 的時候，有一個難點，高階組件。
之前寫過一篇不太成熟的文章，這裏忙裏偷閒再來詳細的理解一下。
- 高階組件代理模式
最出名的高階組件就是 redux 狀態管理的 connect 組件。你們能夠取看一看實現的源碼。
- redux connect 實現源碼。

高階函數的基本概念

想要理解高階組件，咱們先來看看高階函數的含義。java

函數能夠做爲參數被傳遞

setTimeout(() => {
    console.log(1)
},1000)
複製代碼

函數能夠做爲返回值輸出

function foo(x){
    return function(){
        return x;
    }
}
複製代碼

相似於setTimeout(),setInterval()就是普通的高階函數。

setTimeout()
setInterval()

// ajax
$.get('/api/v1',function(){
    console.log('data')
})
複製代碼

上面這兩個就是標準的高階函數react

高階組件 high order component ，簡寫 HOC

-（原來之前的 HOC 就是高階組件）git

高階組件理解和使用

和高階函數同樣，須要函數去包裹一個組件，返回的是一個組件而已

// 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)github

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.tsxajax

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.tsxredux

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.tsapi

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);
複製代碼