Async Компоненты в React - Библиотека открытой исходности

Проект с открытым исходным кодом на GitHub

Некоторое время я работаю с крючками в реакции, но все же сохранившись на написании хорошего ASYNC-кода, который мог бы сделать то, что он мог, когда это могло. Это особенно сложно, если у вас есть много вызовов на основе API «Non-Fetch».

У нас есть Async API, который использует локальные IndexedDB и онлайн-ресурсы, если они доступны, чтобы быть оптимальными в автономном режиме. Это в значительной степени исключает неизвестность.

Мы построили нашу собственную библиотеку компонентов, которые могут быть полезны для других. Это позволяет создавать компоненты так, как вы ожидаете. Самый простой пример, чтобы просто позвонить нескольким асинковым вызовам, а затем оказать результат:

const useStyles = makeStyles(theme=>{
    return {
        icon: {
            backgroundColor: theme.palette.primary.main
        }
    }
})

export const ExampleComponent1 = createAsyncComponent(function Weather({
    lat,
    lon
}) {
    const classes = useStyles()
    return async ()=> {
        const response = await fetch(
            `https://api.openweathermap.org/data/2.5/onecall?lat=${lat}&lon=${lon}&units=metric&appid=${API_KEY}`
        )
        const data = await response.json()
        return 
            
                
            
            
                
                    
                        
                    
                
                
            
            
                
                    
                        
                    
                
                
            
        
    }
})

Есть Некоторые хорошие рабочие примеры в Пример Проект на Github Repo и демонстрация из них здесь Отказ

Он составляет как регулярный реагирующий компонент, но позволяет Async и обычным видом отблесблений для погрузчиков и т. Д. Он также гарантирует, что вы можете вызвать полезные крючки, такие как стили и контексты, прежде чем попасть в асинхронные кишки.

Это идет дальше, хотя, позволяя отчетности о прогрессе и вне рендеринга последовательности:

export const ExampleComponent3 = createAsyncComponent(
    async function MyComponent({ resolve }) {
        const order = [10, 7, 4, 1, 2, 8, 6, 9, 3, 5]
        for (let i = 0; i < 10; i++) {
            let item = order[i]
            resolve(
                item,
                
                    I am item index {item} - rendered in sequence {i + 1}
                
            )

            if (i < 9) {
                resolve(order[i + 1], )
            }
            await new Promise((resolve) => setTimeout(resolve, 1500))
        }
    }
)

MIT Licensed – Доступно на НПМ

npm install --save react-async-component-hoc

Оригинал: “https://dev.to/miketalbot/easier-async-components-in-react-1d21”

Читайте ещё по теме: