Today the cat piece

Optimize your blog interface and be prepared to show everyone a cat movie every time you write (fog).

The words written in the front

  • There was one difficulty when you started learning React, the higher-order components.
  • Had written a not quite mature article before, here busy take a break to come again detailed understanding.
    • High-level component proxy pattern
  • The best known higher-order component is the Connect component for Redux state management. You can take a look at the implementation of the source code.
    • Redux Connect implementation source code.

Basic concepts of higher order functions

To understand higher-order components, let’s first look at what higher-order functions mean.

  • Functions can be passed as arguments
setTimeout(() = > {
    console.log(1)},1000)
Copy the code
  • The function can be output as a return value
function foo(x){
    return function(){
        returnx; }}Copy the code
  • Similar to thesetTimeout().setInterval()Just ordinary higher-order functions.
setTimeout(a)setInterval(a)// ajax
$.get('/api/v1'.function(){
    console.log('data')})Copy the code

These two are standard higher-order functions

High Order Component – HOC

– (The old HOC was a higher-order component)

Advanced component understanding and use

  • As with higher-order functions, a function is required to wrap a component and return only a component
// A.js
import React, { Component } from 'react';
function A(WrapperedComponent){
    return class test extends Component{
        return <div>
            <WrapperedComponent />
        </div>}}export default A;

// When used by other components
// B.js
import A from './A';

class B extends Component{
    return <div>
        hello world!!
    </div>
}
export default A(B)
Copy the code

Use of higher-order components

  • Wrapping HOC directly (WrapperedComponent)
  • Use the decorator @hoc
    • Nom Run eject (I won’t go into detail here)
    • Install Babel adapter files, etc

Write higher-order components

  • Implement a common component
  • Function wraps this component

A simple demo of advanced components

  • Requirement: three pages A,B, and C need to share A progress bar component.
  • Codesandbox. IO/s/rj3r509lj… (Here is the source code)
-- index.ts
-- /src
---- HOCprogress.tsx
---- A.tsx
---- B.tsx
---- C.tsx

Copy the code

HOCprogress.tsx(1)

import React, { Component } from "react";

// Then wrap a function in the class's Render () with WrapperedComponent.

function HOCprogress(WrapperedComponent, value: number) {

/ / write a class first
  return class hocForm extends Component {
    render() {
      return (
        <div>
          <WrapperedComponent />
        </div>); }}; }export default HOCprogress;

Copy the code
  • Optimize it by adding a simple progress bar
// 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;Copy the code
  • Add files A,B, and C

A.tsx

import React, { Component } from "react";
// Introduce higher-order functions
import HOCprogress from "./HOCprogress.tsx";

class A extends Component {
  render() {
    return <div>This is component A!</div>; }}// Wrap A component with higher-order components
export default HOCprogress(A, 56);

Copy the code

B.tsx

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


class B extends Component {
  render() {
    return <div>This is the B component!</div>; }}// Instead of wrapping functions, we can use the @hocProgress decorator, which is detailed in my Decorator article.
export default HOCprogress(B, 98);

/ / C.t sx
Copy the code

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);
Copy the code

Finally, look at the effect

Write in the last

  • Of course, there are many uses of advanced components that can be learned and understood, but this is just a superficial introduction.
  • You can do it in proxy mode. Go
    • Operating props
    • Extracting component state
    • Access to the ref
    • Packaging components

reference

  • A decorator juejin. Cn/post / 684490…
  • imooc www.imooc.com/video/18257