第四章、react高级

九、高阶组件和组件补充

1、认识高阶组件

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './layout/App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App name="黄婷婷"/>);

import React from "react";

/**
 * 1、高阶函数的维基百科定义：至少满足以下条件之一
 *     - 接收一个或多个函数作为输入
 *     - 输出一个函数
 * 2、那么什么是高阶组件呢
 *     - 高阶组件的英文是Higher-Order Components，简称为HOC
 *     - 官方的定义：高阶组件是参数为组件，返回值为新组件的函数
 *     - 我们可以进行如下的解析
 *         ~ 首先，高阶组件本身不是一个组件，而是一个函数
 *         ~ 其次，这个函数的参数是一个组件，返回值也是一个组件
 * 3、高阶组件的定义
 *     - 高阶组件的调用过程类似于这样：
 *       const EnhancedComponent = higherOrderComponent(WrappedComponent)
 * 4、devtools的组件展示名称默认取class后的类名，如果class后没有类名则取父类class的类名。
 *   也可以手动取组件的展示名称：
 *       - class App {};App.displayName = '展示名称';
 *       - const App = class {};App.displayName = '展示名称';
 */
class App extends React.PureComponent {
  render() {
    return (<div>
      姓名：{this.props.name}
    </div>)
  }
}

function enhanceComponent(WrappedComponent) {
  return class NewComponent extends React.PureComponent {
    render() {
      return <WrappedComponent {...this.props}/>
    }
  }
}

const EnhanceComponent = enhanceComponent(App)
export default EnhanceComponent

2、高阶组件应用-增强props

import React from "react";

export default class App extends React.PureComponent {
  render() {
    return (<EnhanceComponent name="阿尔萨斯"/>)
  }
}

class Home extends React.PureComponent {
  render() {
    return (<div>
      <div>姓名：{this.props.name}</div>
      <div>年龄：{this.props.age}</div>
    </div>)
  }
}

function enhanceComponent(WrappedComponent) {
  return props => {
    return (<Home {...props} age={18}/>)
  }
}

const EnhanceComponent = enhanceComponent(App)

import React from "react";

const UserContext = React.createContext({
  name: "希尔瓦娜斯",
  age: 19
})

export default class App extends React.PureComponent {
  render() {
    return (<EnhanceComponent/>)
  }
}

class Home extends React.PureComponent {
  render() {
    return (<div>
      <div>姓名：{this.props.name}</div>
      <div>年龄：{this.props.age}</div>
    </div>)
  }
}

function enhanceComponent(WrappedComponent) {
  return props => {
    return (<UserContext.Consumer>
      {
        value => {
          return <Home {...props} {...value}/>
        }
      }
    </UserContext.Consumer>)
  }
}

const EnhanceComponent = enhanceComponent(App)

3、高阶组件应用-登录鉴权操作

import React from "react";

function withAuth(WrappedComponent) {
  return class AuthCartPage extends React.PureComponent {
    render() {
      const {isLogin} = this.props
      if (isLogin) {
        // 注意：组件名一定要大写开头
        return <WrappedComponent {...this.props}/>
      } else {
        return <LoginPage {...this.props}/>
      }
    }
  }
}

class CartPage extends React.PureComponent {
  render() {
    return (<div>CartPage</div>)
  }
}

const AuthCartPage = withAuth(CartPage);

class LoginPage extends React.PureComponent {
  render() {
    return (<div>LoginPage</div>)
  }
}

export default class App extends React.PureComponent {
  render() {
    return (<div>
      <AuthCartPage isLogin={false}/>
    </div>)
  }
}

4、高阶组件应用-生命周期劫持

import React from "react";

function withRenderTime(WrappedComponent) {
  return class extends React.PureComponent {
    UNSAFE_componentWillMount() {
      this.beginTime = Date.now()
    }

    render() {
      return (<WrappedComponent {...this.props}/>)
    }

    componentDidMount() {
      this.endTime = Date.now()
      const interval = this.endTime - this.beginTime
      console.log(`${WrappedComponent.name}渲染时间：${interval}`)
    }
  }
}

class Home extends React.PureComponent {
  render() {
    return (<div>Home</div>)
  }
}

class About extends React.PureComponent {
  render() {
    return (<div>About</div>)
  }
}

const TimeHome = withRenderTime(Home);
const TimeAbout = withRenderTime(About);

export default class App extends React.PureComponent {
  render() {
    return (<div>
      <TimeHome/>
      <TimeAbout/>
    </div>)
  }
}

5、ref的转发

import React from "react";

class Home extends React.PureComponent {
  render() {
    return (<div>Home</div>)
  }
}

const Profile = React.forwardRef(function (props, ref) {
  return (<div ref={ref}>Profile</div>)
})

export default class App extends React.PureComponent {
  constructor(props) {
    super(props);
    this.titleRef = React.createRef()
    this.homeRef = React.createRef()
    this.profileRef = React.createRef()
  }

  render() {
    return (<div>
      <div ref={this.titleRef}>hello world</div>
      <Home ref={this.homeRef}/>
      <Profile ref={this.profileRef}/>
      <button onClick={e => this.printRef()}>打印ref</button>
    </div>)
  }

  printRef() {
    console.log(this.titleRef.current)
    console.log(this.homeRef.current)
    console.log(this.profileRef.current)
  }
}

6、Portals的使用

import React from "react";
import ReactDOM from "react-dom"

// ui框架dialog的实现原理
class Modal extends React.PureComponent {
  render() {
    const div = document.createElement("div");
    Object.assign(div.style, {
      position: "fixed",
      left: "50%",
      top: "50%",
      transform: "translate(-50%,-50%)"
    })
    document.body.appendChild(div)
    return ReactDOM.createPortal(
      this.props.children,
      div
    )
  }
}

class Home extends React.PureComponent {
  render() {
    return (<div>
      <div>Home</div>
      <Modal>
        <div>Title</div>
      </Modal>
    </div>)
  }
}

export default class App extends React.PureComponent {
  render() {
    return (<div>
      <Home/>
    </div>)
  }
}

原文地址：http://www.cnblogs.com/linding/p/16875593.html