Грамотно используйте загрузку

Vue.js

предисловие

Не знаю, когда у меня появилась идея вести блог, но мой запас знаний еще очень слаб, и я не могу его долго писать. Это мой первый блог, в котором я буду записывать некоторые знания, полученные с тех пор, как я изучил внешний интерфейс. Если есть какие-либо ошибки или упущения, пожалуйста, укажите, что ваша критика и исправления являются для меня отличной мотивацией двигаться вперед!

В обычном процессе разработки нам нужно асинхронно ждать данных и часто использовать график загрузки, чтобы улучшить взаимодействие с пользователем и сообщить пользователю, что мы загружаемся, так как же более изящно использовать загрузку в процессе разработки? При разработке небольших программ нам нужно только одно предложение wx.showLoading() для выполнения задачи, и в веб-разработке есть соответствующие фреймворки пользовательского интерфейса, которые помогут нам в этом. Давайте посмотрим, как это достигается.


Сначала реализуйте простую загрузку

код показывает, как показано ниже

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

Таким образом, мы реализовали относительно простую диаграмму загрузки цикла.Ниже я опишу, как изящно использовать эту загрузку в vue и react соответственно.

Vue часть

Во-первых, используйте веб-пакет vue init для создания каркаса vue, каталог плагина показан на рисунке ниже.

     

Простой код загрузки, который мы реализовали выше, написан на loading.vue, плюс немного логики

<script>
  export default {
    name: "loading",
    data() {
      return {
        show: false
      }
    }
  }
</script>

   index.js

//先引入loading组件
import LoadingComponent from './loading'
const Loading = {}
Loading.install = function (Vue) {
// 生成一个Vue的子类 同时这个子类也就是组件
const LoadingConstructor = Vue.extend(LoadingComponent)
// 生成一个该子类的实例
const instance = new LoadingConstructor()
// 将这个实例挂载在我创建的div上
// 并将此div加入全局挂载点内部
instance.$mount(document.createElement('div'))
document.body.appendChild(instance.$el)
//注入vue的原型链
Vue.prototype.$loading = {
    show() {
        instance.show = true
    },
    close(){  
        instance.show = false
        }
    }
}
export default Loading

Здесь мы создаем подкласс Vue и монтируем его экземпляр глобально. Добавьте несколько методов в цепочку прототипов Vue, чтобы вы могли контролировать отображение и скрытие графика загрузки в любом компоненте с помощью методов, подобных this.$loading.show(). Наконец, мы экспортируем объект Loading. Затем добавьте плагин Loading в main.js и вызовите метод Vue.use() для регистрации плагина.



Наконец, давайте проверим это. Тестовый код выглядит следующим образом, используя setTimeout для имитации асинхронных запросов.

<script>
  export default {
    name: 'HelloWorld',
    data() {
      return {
        msg: ''
      }
    },
    mounted() {
      this.$loading.show()
      setTimeout(()=>{
        this.$loading.close()
        this.msg = '加载完辽！'
      },3000)
    }
  }
</script>



Молочное мышление! тест прошел успешно!


Реагировать раздел

Перед этим позвольте мне представить компоненты высшего порядка (HOC) в реакции.

компоненты более высокого порядка

В React, если одну и ту же функцию необходимо использовать в нескольких разных компонентах, это решение обычно включает Mixin и компоненты более высокого порядка. Однако из-за того, что слишком много примесей усложняют поддержку компонентов, они больше не поддерживаются в React ES6. Компоненты более высокого порядка — отличный способ заменить примеси для реализации общей функциональности абстрактных компонентов. Компонент более высокого порядка на самом деле является функцией, которая получает компонент в качестве параметра и возвращает компонент-оболочку в качестве возвращаемого значения, подобно функции более высокого порядка.

Реализация

Сначала используйте приложение create-react-app для создания тестового каркаса, каталог компонентов высокого уровня показан на следующем рисунке.


index.css — это в основном стиль загрузки, а код index.js выглядит следующим образом.

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 hoc

Мы определяем функцию hoc, которая принимает компонент в качестве параметра. Свойство состояния компонента управляется с помощью this.state, а компонент визуализируется с помощью super.render(). Наконец, экспортируйте функцию hoc. Затем импортируйте его в компонент следующим образом

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

class Home extends Component {
    constructor(props) {
        super(props)
        this.state = {
            msg: '还没加载好',
            loading: true
        }
    }

    render() {
        return (
            <div>
                {this.state.msg}
            </div>
        );
    }

    componentDidMount() {
        let loading = this.state.loading
        setTimeout(() => {
            this.setState({
                loading: !loading,
                msg: '加载完辽!'
            })
        }, 3000)
    }
}

export default hoc(Home)

setTimeout также используется для имитации асинхронных запросов, и результаты теста также успешны. Реагирующая часть не использует декораторы для использования компонентов более высокого порядка, что недостаточно элегантно. . . (Я попробовал все методы онлайн-обработки в приложении create-реагировать, но все равно сообщил об ошибке..)

наконец

На этом мы закончили с тем, как изящно использовать загрузку во Vue и React. Это очень простая версия демо, но я все же надеюсь поделиться ею с вами. Только после того, как я закончил писать, я действительно понял эту старую поговорку, я чувствовал себя поверхностным на бумаге, и я знал, что должен это сделать.


Категории