React: 高阶组件再理解

setTimeout(() => {
    console.log(1)
},1000)

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

setTimeout()
setInterval()

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

// 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)
复制代码

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

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 (
          
             {value} %

            
          

      );
    }
  };
}

export default HOCprogress;

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);

复制代码

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 同上
复制代码

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);