摘要:開發(fā)歷程項目地址這是一個什么玩意兒上有太多太多的牛人,這個東西可以幫助你通過給定的一個的用戶然后通過他關(guān)注的人找出他關(guān)注的人里的被關(guān)注數(shù)最高的幾個然后不斷的循環(huán)從而通過關(guān)系鏈找到上最受歡迎的大神這個東西還只是一個小東西如果你有興趣可
find-github-star 開發(fā)歷程:
0x01. 這是一個什么玩意兒?項目地址 find-github-star
github上有太多太多的牛人, 這個東西可以幫助你通過給定的一個github的用戶, 然后通過他關(guān)注的人, 找出他關(guān)注的人里的被關(guān)注數(shù)最高的幾個. 然后不斷的循環(huán), 從而通過關(guān)系鏈找到github上最受歡迎的大神~ 這個東西還只是一個小東西, 如果你有興趣, 可以fork這個小的不能再小的項目...
項目截圖
一來是自己確實想做著玩一玩, 還有就是這個項目用到了react + redux. 想進(jìn)一步的熟悉redux這個玩意兒。
0x03. 開工開工~ 搭建環(huán)境用到的工具:webpack. 直接上配置
var webpack = require("webpack"); var OpenBrowserPlugin = require("open-browser-webpack-plugin"); module.exports = { entry: [ "webpack/hot/dev-server", "webpack-dev-server/client?http://localhost:8080", "./src/entry.js" ], output: { path: "./build", filename: "[name].js" }, module: { loaders: [ { test: /.less$/, loader: "style!css!less" }, { test: /.jsx?$/, loader: "babel-loader", exclude: /node_modules/ } ] }, plugins: [ new OpenBrowserPlugin({ url: "http://localhost:8080" }), ] }0x04. 使用react-redux
當(dāng)我剛開始使用react-redux的時候, 我的內(nèi)心是絕望的. 什么connect, provider, 各種props映射, 各種dispatch映射.但是畢竟就是想拿這個東西順便學(xué)習(xí)一下react-redux. 話不多說, 上代碼!
entry.js
const loggerMiddleware = createLogger() let store = createStore(reducer, compose( applyMiddleware(thunk, loggerMiddleware), window.devToolsExtension ? window.devToolsExtension() : f => f )) devTools.updateStore() render(, document.getElementsByTagName("div")[0]) if (module.hot) { module.hot.accept() }
這里用到了redux中間件的概念, 這里建議看官方的文檔比較靠譜. 中間件thunk是允許你向dispatch傳一個函數(shù), 中間件LoggerMiddleware會記錄你的每一個action, 并且利用方法console.group, 美觀的輸出.
好! Provider組件才是重點, Provider利用react的context機(jī)制, 將創(chuàng)建好的store暴露給app以及其所有后代. 這樣App的后代就能通過context訪問到store啦! 最后面那個if 就是webpack的webpack dev server插件的超炫功能----熱替換.
因為store已經(jīng)暴露到了整個App下, 所以所有組件可以調(diào)用store.dispatch來分發(fā)動作(數(shù)據(jù)流出組件), 也可以調(diào)用store.subscribe來訂閱(數(shù)據(jù)流入組件). 但是redux的設(shè)計者覺得這樣有點坑, 因為在react中, 有些組件沒有state, 只有props, 這樣的組件我們稱之為純組件. 于是乎, redux將組件分成了兩個部分, 容器組件和展示組件.對于展示組件(純組件)并不需要狀態(tài), 容器組件給出固定的props, 總會輸出一致的展示組件. 于是, state都放到了容器組件這里, 為了讓容器組件更好的獲取(輸出)store里的state. 就要使用connect. 上代碼!
Main.js
class Main extends Component { createProfiles(profiles, repos) { return profiles.map((profile, index) =>) } render() { return ( { this.createProfiles(this.props.profiles, this.props.repos) } ) } } function mapStateToProps(state) { return { profiles: state.profiles, repos: state.repos } } export default connect( mapStateToProps )(Main)
最下面的connect是一個可以將Main組件包裝起來的函數(shù), Main組件被包裝后會在外層新增一個新的組件包裹Main. mapStateToProps會在store的state發(fā)生變化的時候被調(diào)用, 其返回值會傳給Main組件作為props, 其實看名字就知道了.
0x05 數(shù)據(jù)的抓取.這里用到了異步action, 直接上代碼!
actions.js
export const fetchProfiles = username => (dispatch, getState) => { dispatch(requestProfile(username)) return fetch(`https://api.github.com/users/${username}`) .then((response) => { // 檢查用戶是否存在 if (response.status !== 200) { throw new Error("profiles fetch failed") } return fetch(`https://api.github.com/users/${username}/following`) }) .then(response => response.json()) .then(following => { return Promise.all(following.map(f => { return fetch(`https://api.github.com/users/${f.login}`) })) }) .then(responses => Promise.all(responses.map(response => response.json()))) .then(followingUsers => { const sortedUsers = followingUsers.sort((a, b) => b.followers - a.followers) return sortedUsers.slice(0, 3) }) .then((users) => { dispatch(requestSuccess(users)) console.dir(users) return Promise.all(users.map(user => fetch(`https://api.github.com/users/${user.login}/repos`))) }) .then(responses => Promise.all(responses.map(res => res.json()))) .then((repos) => { repos = repos.map(repo => repo.slice(0, 3)) dispatch(requestReposSuccess(repos)) }) .catch((err) => dispatch(requestFailed(err))) }
這里才是最好玩(最坑)的地方, fetchProfiles函數(shù)是一個Action Creator,只要爬取數(shù)據(jù), 這個函數(shù)就會被調(diào)用. 這里用到了各種then(旗幟鮮明的表示用好Promise/A+規(guī)范真的是爽歪歪.)fetchProfiles會被傳入dispatch(用來分發(fā)之后的異步action)和getStore.倒數(shù)第n行的dispatch的調(diào)用就繼續(xù)發(fā)起一個異步action, 下一個action的代碼如下:
function requestReposSuccess(repos) { repos = repos.map(repo => repo.sort((a, b) => b.stargazers_count - a.stargazers_count)) repos = repos.map(repo => repo.map(r => ({ star: r.stargazers_count, name: r.name, description: r.description.slice(0, 40) + " ..." }))) return { type: REQUEST_REPOS_SUCCESS, payload: repos } }
旗幟鮮明的表示es6的匿名函數(shù)的寫法真的是讓我像寫詩一樣寫代碼~
0x06. 最后大概的就這么多, 不總結(jié)的話就不像是一篇文章了, 總結(jié)如下:
webpack確實是一個好東西, 要是能夠用上熱替換的話真的是太強(qiáng)大了, 怪不得能火成這鳥樣...其代碼分割也是很強(qiáng)大的
使用react中的context可以讓react自動將信息傳到子樹中的任何組件,但是組件必須設(shè)置contextTypes, 否則無法訪問對應(yīng)的context.對于主題等這些全局信息應(yīng)該使用context傳給子樹, 但是一些平常的state最好別傳, 原因, 而且context的API不是穩(wěn)定的, 今后可能會發(fā)生變化.
redux中store是唯一存儲狀態(tài)的容器(這也是和flux的不同之處), 還有容器組件和展示組件, redux通過provider注入store中的state到App中, 通過connect來構(gòu)造容器組件, 方便組件更好的獲得(輸出)state, 同時限制展示組件只能從容器組件獲取state. 一個App中的容器組件可以有多個.
redux的中間件的用法及原理, 很強(qiáng)勢, 建議去看. 這是地址
thunk以及promise等中間件可以實現(xiàn)異步的action.
最后就是寫這個項目感覺很棒, es6+react+babel+webpack+redux 寫前端真的是酷比(苦逼)了!
寫這篇文章真的很不容易哈, 如果你覺得我寫的對你有那么一點點的幫助, 可以選擇關(guān)注我的新浪微博, Twitter, Github, Facebook, 個人主頁, 個人主頁還在備案, 馬上開通~
參考文章:
http://jiavan.com/react-async...
http://www.ruanyifeng.com/blo...
完!~ 荊軻刺秦王~ ~~~~~~其實我不是王尼瑪...
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/80495.html
摘要:搭建的博客曾經(jīng)用的寫的博客,現(xiàn)在看來已經(jīng)很了,所以用目前最火的框架重構(gòu)一下。后端重構(gòu)博客嘛,以前用寫的后臺,所以略懂一些,作為一個前端開發(fā),目標(biāo)就是全棧嘛,選用了最為流行的也用了目前最為流行的作為后端配合。 React-Node搭建的博客 曾經(jīng)用的php+mysql+js寫的博客,現(xiàn)在看來已經(jīng)很low了,所以用目前最火的react+koa框架重構(gòu)一下。先上地址吧:目前線上版本http:...
摘要:在,是當(dāng)之無愧的王者,贏得了與之間的戰(zhàn)爭,攻陷了的城池。于月發(fā)布了版本,這一版本為了更好的表現(xiàn)加入了渲染方式。前端框架這個前端框架清單可能是年疲勞的元兇之一。的創(chuàng)建者,目前在工作為尋找構(gòu)建簡單性和自主配置性之間的平衡做了很大的貢獻(xiàn)。 春節(jié)后的第一篇就從這個開始吧~本文已在前端早讀課公眾號上首發(fā) 原文鏈接 JavasScript社區(qū)在創(chuàng)新的道路上開足了馬力,曾經(jīng)流行過的也許一個月之后就過...
摘要:前端每周清單第期支付寶前端構(gòu)建工具發(fā)展用加快網(wǎng)頁響應(yīng)速度餓了么升級實踐前端前端每周清單前端每周清單專注前端領(lǐng)域內(nèi)容,分為新聞熱點開發(fā)教程工程實踐深度閱讀開源項目巔峰人生等欄目。 前端每周清單第 12 期:支付寶前端構(gòu)建工具發(fā)展、LinkedIn用Brotli加快網(wǎng)頁響應(yīng)速度、餓了么PWA 升級實踐 為InfoQ中文站特供稿件,首發(fā)地址為這里;如需轉(zhuǎn)載,請與InfoQ中文站聯(lián)系。從屬于筆...
摘要:的全稱是統(tǒng)一資源定位符英文,可以這么說,是一種標(biāo)準(zhǔn),而網(wǎng)址則是符合標(biāo)準(zhǔn)的一種實現(xiàn)而已。渲染器,將組件渲染到頁面上。 0x000 概述 從這一章開始就進(jìn)入路由章節(jié)了,并不直接從如何使用react-route來講,而是從路由的概念和實現(xiàn)來講,達(dá)到知道路由的本質(zhì),而不是只知道如何使用react-route庫的目的,畢竟react-route只是一個庫,是路由的一個實現(xiàn)而已,而不是路由本身。 ...
閱讀 1293·2021-11-16 11:44
閱讀 3759·2021-10-09 10:01
閱讀 1745·2021-09-24 10:31
閱讀 3833·2021-09-04 16:41
閱讀 2510·2021-08-09 13:45
閱讀 1210·2019-08-30 14:08
閱讀 1776·2019-08-29 18:32
閱讀 1640·2019-08-26 12:12