любая прогрессивная программа с реагирующим скелетом？ - PullRequest
Новая
       109

любая прогрессивная программа с реагирующим скелетом？

0 голосов
/ 17 октября 2019

Я хочу, чтобы на всех страницах был прогрессивный скелет, который написан с реагированием, а избыточный период был плавным - не сбой - как замена DOM скелета, лучше повторно использовать DOM скелета и заменять только innerText илиcss ； будет выглядеть лучше для пользователя;Есть ли популярный способ сделать это? или какая-либо программа или любая идея?

  1. реагирует 16,8
  2. реагирует ловушка
  3. использует обещание Simulat
  4. использует CSS для управления скелетом и повторного использованияdom, not replace;

как на gif show: рендеринг контента по реакции повторно использует скелет DOM, замените innerText, в таком случае, без сбоев на белый экран.

введите описание изображения здесь 

import React, { useReducer, useEffect } from "react";
import ReactDOM from "react-dom";
import "./styles.css";

const createTimeoutPromise = callBack => {
  return new Promise((resole, reject) => {
    setTimeout(() => {
      callBack();
      resole();
    }, 1000);
  });
};

function Counter() {
  const [data, dispatch] = useReducer(
    (state, action) => {
      const { type, payload } = action;
      switch (type) {
        case "title":
          return {
            ...state,
            title: { data: payload, ready: true }
          };
        case "subTit":
          return {
            ...state,
            subTit: { data: payload, ready: true }
          };
        case "img":
          return {
            ...state,
            img: { data: payload, ready: true }
          };
        default:
          return { ...state };
      }
    },
    { title: {}, subTit: {}, img: {} }
  );

  useEffect(() => {
    createTimeoutPromise(() => {
      dispatch({ type: "title", payload: "我是第一个title" });
    })
      .then(() => {
        return createTimeoutPromise(() => {
          dispatch({ type: "subTit", payload: "我是suttitle" });
        });
      })
      .then(() => {
        return createTimeoutPromise(() => {
          dispatch({
            type: "img",
            payload:
              "https://www.discountramps.com/images/xxl/FH-38HOOK.jpg?v=100114421018-2"
          });
        });
      });
  }, []);

  return (
    <div className="wrapper">
      <div className={data.img.ready ? "image" : "img-hold"}>
        <img src={data.img.data} alt="" />
      </div>
      <div className="text">
        <div className={data.title.ready ? "title" : "tit-hold"}>
          {data.title.data}
        </div>
        <div className={data.subTit.ready ? "sub" : "sub-hold"}>
          {data.subTit.data}
        </div>
      </div>
    </div>
  );
}

ReactDOM.render(<Counter />, document.querySelector("#root"));

весь кейс посмотрите на коды и короб-кейс ;https://codesandbox.io/s/serene-keller-et9zh

Есть ли какой-нибудь популярный способ сделать это? или любая программа или любая идея?

...