preface

I do not know when I began to have the idea of writing a blog, but my knowledge reserve is still very weak, and I can not write. This is my first blog post, which is a record of some of my knowledge since learning front-end. If there are any mistakes or omissions, please point out that your criticism and pointing is a great power on my way forward!

In normal development, we need to wait for data asynchronously. Loading diagrams are often used to enhance user experience and let users know that we are loading. So how can we use loading more gracefully in development? Wx.showloading () is all you need to do with a small program, and there are UI frameworks for web development to do this. How does that work? Let’s take a look.


Start with a simple loading

The following code

<div class="container">
  <div class="loading"></div>
</div>
.container {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.loading {
  width: 100px;
  height: 100px;
  border-radius: 100%;
  border: 5px #ffffff solid;
  border-right-color: #87CEEB;animation: loading 1s linear infinite; } @keyframes loading { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }}Copy the code

This gives us a simple loop loading diagram. I’ll describe how to use this loading elegantly in Vue and React.

Vue part

Start by generating a Vue scaffold with vue Init WebPack. The directory for the plug-in is shown below

     

Loading. Vue contains the simple loading code we implemented above, plus a little logic

<script>
  export default {
    name: "loading".data() {
      return {
        show: false
      }
    }
  }
</script>Copy the code

   index.js

// Import loading component import LoadingComponent from'./loading'
const Loading = {}
Loading.install = function(Vue) {// Generate a subclass of Vue and that subclass is the component const LoadingConstructor = vue.extend (LoadingComponent) // Generate an instance of that subclass const instance = New LoadingConstructor() // mount this instance on the div I created // and add this div to the global mount point inside instance.$mount(document.createElement('div'))
document.body.appendChild(instance.$el// Inject vue's prototype chain vue. Prototype.$loading = {
    show() {
        instance.show = true
    },
    close(){  
        instance.show = false}}}export default Loading

Copy the code

Here we generate a Vue subclass and mount its instance globally. Inject some methods into Vue’s prototype chain so that the loading diagram can be shown and hidden in any component with methods like this.$loading.show(). Finally, we export the Loading object. Then import the Loading plug-in in main.js and call the vue.use () method to register the plug-in




Finally, let’s put it to the test. The test code is as follows, using setTimeout to simulate an asynchronous request.

<script>
  export default {
    name: 'HelloWorld'.data() {
      return {
        msg: ' '}},mounted() {
      this.$loading.show()
      setTimeout(()=>{
        this.$loading.close()
        this.msg = 'Finish loading liao! '
      },3000)
    }
  }
</script>Copy the code




Milk to think! Test successful!


The React part

Before we do that, let’s talk about HOC in React.

High order component

In React, when multiple different components need the same functionality, the solution usually involves mixins and higher-order components. However, mixins are no longer supported in React ES6 because too many mixins can make components difficult to maintain. Higher-order components are a good way to replace mixins in implementing the common functionality of abstract components. A higher-order component is a function that takes a component as an argument and returns a wrapper component as a return value, similar to a higher-order function.

The specific implementation

Use create-React-app to generate a test scaffold with a list of higher-order components as shown below



Index.css is the loading style. The code of index.js is as follows

import React from 'react';
import './index.css'

function hoc(ComponentClass) {
    return class HOC extends ComponentClass {
        render() {
            if(! this.state.loading) { console.log(this.state.loading)return super.render()
            }
            else {
                return (<div>
                    <div className="container">
                        <div className="loading"></div>
                    </div>
                </div>)
            }
        }
    }
}

export default hocCopy the code

We define a hoc function that takes a component as an argument. Use this.state to manipulate the state property of the component, and use super.render() to render the component. Finally, the hoc function is derived. It is then introduced in the component as follows

import hoc from '.. /hoc/loading/index'

class Home extends Component {
    constructor(props) {
        super(props)
        this.state = {
            msg: 'Not yet loaded',
            loading: true}}render() {
        return (
            <div>
                {this.state.msg}
            </div>
        );
    }

    componentDidMount() {
        let loading = this.state.loading
        setTimeout(() => { this.setState({ loading: ! loading, msg:'Finish loading liao! '}, 3000)}}export default hoc(Home)Copy the code

SetTimeout is also used to simulate asynchronous requests, and the test results are also successful. The React section does not use decorators to use advanced components, which is not elegant enough… (Create-react-app tries all the methods on the web and still fails.)

The last

How to use Loading gracefully in Vue and React ends here. This is a super easy demo, but I want to share it with you. Finished writing really realized the old saying, the paper come zhongjue shallow, must know this to practice.