relay學習

01-30

relay是facebook提出的、類似於redux的、實現了flux框架的類庫。

relay的優勢：

facebook自家產品
和graphql的結合，更高效的api查詢

relay的劣勢：

學習成本更高：中文資料少、英文文檔也沒有redux寫的好；要學的東西多；
操作複雜，要寫的代碼量更多

但是不管怎麼樣，relay還是有很多值得我們學習的。因此我在下班之餘也對它進行了簡單的嘗試。代碼放在github上面。這個項目主要包含了兩個例子：

對於facebook relay項目中的todo例子進行了後台(todo例子中的後台數據是mock的，沒有真正的資料庫操作)，即graphql的實現。其中用到了Sequelize and sqlite
第二個例子是對react和relay的實際操作，同時用react實現了模版material design模版

如果我們按照那個項目的說明文檔install和start後，首先看到的todo例子。

這個實例包含了對於todo對象的增刪改查操作，基本的看會這個例子就可以對relay的前台操作和graphql的後台操作有了一定的了解。

relay的查操作用的是graphql的query
relay的增刪改操作用的是graphql的mutation

如果讀者想要看第二個例子，需要進行下面的兩個操作：

1. 在js/app.js中，注釋到給todo例子的ReactDOM.render方法，然後取消對於blog例子的對應的方法；

import React from react;n...nn// render for blognReactDOM.render(n ...n);nn// render for toton// ReactDOM.render(n// ...n// );n

2. 在public/style.css中，取消body的before偽元素的樣式（有三個media查詢）

@media (max-width: 512px) and (-webkit-min-device-pixel-ratio: 1.5),n (max-width: 512px) and (min-resolution: 1.5dppx),n (max-width: 1024px) and (-webkit-max-device-pixel-ratio: 1.5),n (max-width: 1024px) and (max-resolution: 1.5dppx) {n body::before {n background-image: url(images/bg_1024.jpg);n }n}n@media (min-width: 513px) and (max-width: 1024px) and (-webkit-min-device-pixel-ratio: 1.5),n (min-width: 513px) and (max-width: 1024px) and (min-resolution: 1.5dppx),n (min-width: 1025px) and (max-width: 2048px) and (-webkit-max-device-pixel-ratio: 1.5),n (min-width: 1025px) and (max-width: 2048px) and (max-resolution: 1.5dppx) {n body::before {n background-image: url(images/bg_2048.jpg);n }n}n@media (min-width: 1025px) and (-webkit-min-device-pixel-ratio: 1.5),n (min-width: 1025px) and (min-resolution: 1.5dppx),n (min-width: 2049px) and (-webkit-max-device-pixel-ratio: 1.5),n (min-width: 2049px) and (max-resolution: 1.5dppx) {n body::before {n background-image: url(images/bg_2880.jpg);n }n}n

然後，刷新頁面，我們就可以看到具有三個博文的博客頁面了：

點擊某個博文的title，就可以進入詳細頁了。

注意，是title。點擊圖片的其他部分，不能進入詳細頁。

詳細頁包含了五個功能（當然還包含post和comment的load功能）：

1. 返回到主頁，紅框

2. 前後博文的跳轉，當前是第一篇點進來的，所有隻有一個方向的跳轉，黃框

3. 評論的update操作，點贊，籃框

4. 評論的delete操作，黑框

5. 評論的create操作，綠框

因此這個頁面包括了relay中crud的四個操作的實踐，對todo實例的進一步學習和實現。