當 Turbolinks 遇上 React

吚7XUEROLQNV蝽Ӥ5HDFW

襟儘䓛⛳ @elct9620 WEB DEVELOPER GAME DEVELOPER

Բ狝夺䌌Ꭺ7DPDVKLL䌕礯䛑አ礯ֺ

7XUEROLQNVฎचෝ+70/ጱ+LVWRU\$3,ಅ䋿匍 ጱದ蔩牐 ದ蔩ܻቘ

ࣁ螂݄+LVWRU\$3,ݝአෝ獥矦ӤӞ殷౲ᘏӥӞ殷牐 ದ蔩ܻቘ

ದ蔩ܻቘ history.back(); history.forward(); ܻতጱ+LVWRU\$3,

+70/碝ीጱSXVK6WDWHۑ胼㳷虏౯㮉ݢ犥䌘倵薩夵袅蝱ᤈ砺֢牐 ದ蔩ܻቘ

技術原理

ದ蔩ܻቘ var newState = { pageName: 'New Page', controller: 'acticle',
id: '1' }; window.history.push( newState, newState.pageName, "/article/1" );

技術原理

7XUEROLQNVฎݑک3-$;ದ蔩ጱ୽段叨ኞጱ叨ᇔ牐 ದ蔩ܻቘ

技術原理

7XUEROLQNV虏M4XHU\篷ဩྋଉ螀֢ य़疑犋ฎ盄ࡅ稭

M4XHU\碉ݳ $(document).ready(function() { // OnLoad... }); य़ग़碍碻狡౯㮉䨝ࣁM4XHU\ጱUHDG\ 狶蒂ቘ

M4XHU\碉ݳ $(document).on("turbolinks:load, function(){ // OnLoad... }); 犋螂ࣁ7XUEROLQNVᥝ硬አ7XUEROLQNVጱORDGԪկ

M4XHU\䨝㵕֕ฎ螭ฎ瓥ധ ᯿蕦ڡত玕

jQuery.ready => 頁面讀取觸發 Turbolinks:load => 替換頁面時觸發 Turbolinks API

M4XHU\碉ݳ $(document).on(“turbolinks:before-cache, function(){ // UnLoad… }); ࣁ殷ᶎᤩ䧙ਂԏ獮薹ᴻM4XHU\زկ

಩7XUEROLQNV吚5HDFW5RXWHUጱ磦դ 5HDFW7XUEROLQNV

5HDFW碉ݳ ReactDOM.render(<App />, root) Ӟ膢౯㮉䨝ፗ矑狶౮6LQJOH3DJH$SSOLFDWLRQ

技術原理

虏5HDFWݝ䌘蟂獤ጱ殷ᶎ磦矦蟂獤磦矦

技術原理

᯿蕦5HQGHUزկ蝨౮ग़稞Ԫկ翉ਧ ๅ矦殷ᶎ

5HDFW碉ݳ ReactDOM.unmountComponentAtNode(root); ֵአXQPRXQW㬵薹ᴻܻ๜ጱ翉ਧ

櫝樄殷ᶎ碻狶XQORDG XQPRXQW 疰ݢ犥ԧ 蚤M4XHU\ጱ眐हӞ䰬

ඪൔ:HESDFNHUԏ盅牧-DYD6FULSW哴ᰁ獊蟂硬አ:HESDFN蒂ቘ 5DLOV

3UR7LS <div id="attendees" data-event-id="<%= @event.id %>"> const dataset = root.dataset;
ReactDOM.render(<Component {...dataset} />, root); 5HQGHU碻ݢ犥癲獈GDWD痀௔斔ۗ

3UR7LS const Cable = ActionCable.createConsumer(); $FWLRQ&DEOH犖ݢ犥ࣁ:HESDFNӾֵአ

3UR7LS MessageChannel.broadcast_to( current_user, type: 'PRIVATE_MESSAGE', message: 'Hi, I am Aotoki!'
) $FWLRQ&DEOHݢ犥ፘ਻ෝ5HGX[ )OX[

3UR7LS const channel = Cable.subscriptions .create('MessageChannel') channel.received = store.dispatch $FWLRQ&DEOHݢ犥ፘ਻ෝ5HGX[
)OX[

3UR7LS var App = new Vue({ beforeDestroy: ... }) #
before-cache App.$destroy() 9XHӞ䰬犖ݢ犥

當 Turbolinks 遇上 React

當 Turbolinks 遇上 React

More Decks by 蒼時弦や

Other Decks in Programming

Featured

Transcript