Web Development

React

Developer

JavaScript

Front End Development

Ultimate Guide to HOC in React (Part 3)

React Higher-Order Components (HOC) is a familiar concept for many React developers. Reverse Inheritance and throttled rendering. 🚀💻

Hello everyone, I’m Biao, a Javascript front-end developer.

Today, I will go on sharing HOC in React. Hoping you’ll find them enjoyable.
The first two chapters introduced us to two implementation approaches of Higher-Order Components (HOCs): normal property proxy and reverse inheritance. We explored how to write an HOC from the perspectives of enhancing props and controlling rendering.

Next, let’s go on.How to write an advanced version of an HOC?

01.Asynchronous Components (Lazy Loading)🌿

I don’t know if anyone has used dva, but the dynamic function inside it implements component asynchronous loading using the HOC pattern. Here, I've simplified it and extracted the core code as follows:

/* lazy-loading HOC */
export default function AsyncRouter(loadRouter) {
  return class Content extends React.Component {
    state = {Component: null}
    componentDidMount() {
      if (this.state.Component) return
      loadRouter()
        .then(module => module.default)
        .then(Component =>…