Разделы презентаций


Асинхронный рендеринг компонентов

Содержание

Асинхронный рендеринг компонентовЗуев ДмитрийКомпания ТензорКогда стоит подождать

Слайды и текст этой презентации

Слайд 1Асинхронный рендеринг компонентов
Зуев Дмитрий
Компания Тензор
Когда стоит подождать

Асинхронный рендеринг компонентовЗуев ДмитрийКомпания ТензорКогда стоит подождать

Слайд 5Асинхронный рендеринг компонентов
Зуев Дмитрий
Компания Тензор
Когда стоит подождать

Асинхронный рендеринг компонентовЗуев ДмитрийКомпания ТензорКогда стоит подождать

Слайд 62017
Асинхронный рендеринг компонентов

2017Асинхронный рендеринг компонентов

Слайд 7Шаблонизация
ДАННЫЕ
BUY
$799.99

ШаблонизацияДАННЫЕBUY$799.99

Слайд 8Где многие ошибаются?
?
ПОЛУЧЕНИЕ ДАННЫХ

Где многие ошибаются??ПОЛУЧЕНИЕ ДАННЫХ

Слайд 9Интернет-магазин


BUY
$799.99

Интернет-магазинBUY$799.99

Слайд 11Server Side Rendering
BROWSER CODE
SERVER CODE

Server Side RenderingBROWSER CODESERVER CODE≠

Слайд 12Интернет-магазин
Framework.load();
BUY

Интернет-магазинFramework.load();BUY

Слайд 15Синхронная шаблонизация
ДАННЫЕ
BUY
$799.99

Синхронная шаблонизацияДАННЫЕBUY$799.99

Слайд 16ДАННЫЕ
TEAM 1
TEAM 2
TEAM 3
TEAM 4
TEAM 5
TEAM 6

ДАННЫЕTEAM 1TEAM 2TEAM 3TEAM 4TEAM 5TEAM 6

Слайд 17Асинхронный рендеринг компонентов
BUY
$799.99
ДАННЫЕ
ДАННЫЕ

Асинхронный рендеринг компонентовBUY$799.99ДАННЫЕДАННЫЕ

Слайд 18https://github.com/facebook/react/blob/master/fixtures/unstable-async/suspense/README.md

https://github.com/facebook/react/blob/master/fixtures/unstable-async/suspense/README.md

Слайд 19
render() {
const {currentId, showDetail} = this.state;

return showDetail
? this.renderDetail(currentId)
: this.renderList(currentId);

}

renderDetail(id) {
return (


}>



);
}

function UserPageLoader(props) {
const UserPage = UserPageResource.read(cache).default;
return ;
}

render() {  const {currentId, showDetail} = this.state;  return showDetail   ? this.renderDetail(currentId)

Слайд 20export default function UserPage({id}) {
return (


/>}>



);
}
export default function UserPage({id}) { return (

Слайд 21function UserPageLoader(props) {
const UserPage = new Promise();
return

{...props} />;
}

function UserPageLoader(props) { const UserPage = new Promise(); return ;}

Слайд 23componentWillMount

componentWillMount

Слайд 24componentWillReceiveProps

componentWillReceiveProps

Слайд 25componentWillUpdate

componentWillUpdate

Слайд 26getDerivedStateFromProps

getDerivedStateFromProps

Слайд 27function UserPageLoader(props) {
const UserPage = UserPageResource.read(cache).default;
return

/>;
}

function UserPageLoader(props) { const UserPage = UserPageResource.read(cache).default; return ;}

Слайд 29Это работает только на клиенте

Это работает только на клиенте

Слайд 34 Router.setCurrentPage(req.url);
const app = new Vue({
data: {

url: req.url
},
created: function ()

{
this.abc = 1;
},
template: `
VIPER by Vue
`
});

Vue.component('data-loader', function (resolve, reject) {
Source.getDataFromStore( Router.getCurrentId() ).then( (dataFromBl)=> {
resolve({
created: function(){
this.my = dataFromBl || {};
},
template: '

{{my.data}}
'
})
});
});

getDataFromStore: function(id){
return new Promise(resolve => {
setTimeout(()=>{
resolve(this.storeBank[id]);
});
});
}

const Router = {
...
getCurrentId: function(){
return this.url.split('/')[1];
}
}

resolve({
created: function(){
this.my = dataFromBl || {};
},
template: '

{{my.data}}
'
})
Router.setCurrentPage(req.url); const app = new Vue({  data: {   url: req.url  },

Слайд 35delete Vue.options.components['data-loader'];

Vue.component('data-loader', function (resolve, reject) {

Store.getDataFromStore( Router.url.split('/')[1] ).then( (dataFromBl)=> {

resolve({…})
});
});
delete Vue.options.components['data-loader'];   Vue.component('data-loader', function (resolve, reject) {   Store.getDataFromStore( Router.url.split('/')[1] ).then( (dataFromBl)=> {

Слайд 39













































_beforeMount: function(options){
return new Promise(resolve => {

… resolve(data); …
});
}

_beforeMount: function(options){  return new Promise(resolve => {   … resolve(data); …  });}

Слайд 40Both Side Rendering
BROWSER CODE
SERVER CODE

BROWSER RESULT
SERVER RESULT
=

Both Side RenderingBROWSER CODESERVER CODE≠BROWSER RESULTSERVER RESULT=

Слайд 41ДАННЫЕ
ДАННЫЕ
React
WaSaby

ДАННЫЕДАННЫЕReactWaSaby

Слайд 43WaSaby + GitHub =

WaSaby + GitHub =

Обратная связь

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

Email: Нажмите что бы посмотреть 

Что такое TheSlide.ru?

Это сайт презентации, докладов, проектов в PowerPoint. Здесь удобно  хранить и делиться своими презентациями с другими пользователями.


Для правообладателей

Яндекс.Метрика