react-jianshu項目總結

一. icon-font的使用:

直接使用

1. 官網挑選字體 -> 打包下載解壓 -> 複製到statics目錄下

2. 引入css樣式

<link rel="stylesheet" href="../../statics/iconfont.css">

3. 使用

<i className="iconfont">&#xe636;</i>

使用 styled-components

1.將iconfont.css改爲icon.js

2.將url中的相對路徑進行處理

src: url('./iconfont.eot?t=1553066355757'); /* IE9 */
  src: url('./iconfont.eot?t=1553066355757#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAARIAAsAAAAACHQAAAP7AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDHAqEOINrATYCJAMQCwoABCAFhG0HPxtUB8iOkdsQluWX/08+L07tS3JSTS6Q0409ohKAszsOyJkbfI7HeEAM4aH39m+7gjIKPMG4FwQBDjDLNIssSfKJe8d/nQc2n33LZcxlY1qdhwHGAQW4xtAsLqCcW4a3uhQOejoQgDDbCmTu7B8HpyD1CIDsVsgHnrFRGrIJjnBXdE2QEx1eDtBnAZwQfJ98KA0OUK4KMtPw2hFE81vw5QK2PbXdUnfims4DQO4FMMAKgAJkq/T5sSixAiPM3ygqARxH4fOCzyu/XJBKIcVRdJz6ATr4zyM9iC4dMeVadmFyzgKFzytZYPDlAsUD6BRcmwNUwLWAb4GZ+cKUizLoM9OFqnGuqZvM00/NH5feM87wH33qpfnkzTfzR0JnkwteOeal7S+WH1wUHDnjkwA545yCwzYYp3tueIO8/rrx6qvjr702ccwbdadpE1cds3jsmos3vvGGNy8pHff116PLzzhGa6hvPP103/CpBz1G08RpaAs849VXy08986zT1GMKrnhm+SveM07PEkb6uAirhxx6+mxx7tRVvnvUY0CEeFAcfJ7s8Hp3BKevn7j1SrSr1GMeIaTp4sNnzTJ/rl40qKqDi3YVnXWJW3uwrgmt49cnPLU/K2unh0+MUvd2z5LUCfafe8LXait+uSVdc6P2J9++KJNXzjqqgp344EMn0RPpQw+5S5700IMnsoojZx1cbDz/PSnOKiGomK5imy+/YjPdQiUNlTiXX75FjN4xfVvZvCltu86smcfzn5hbllZ6zEXvXnRcLnNpF5z017T8Hn+b++RE851pii6vfWtHVve083GbXS8taX9JZqb8ba9PNg5N0Fa/1fiG8k9j0nmsuoi4WgrjSw0r4wi1r7n20yO9zjPTtH+mL/xp4WwkAClSfntSthNSFnuY/lAIsgfZn6+GLc967ais+t+4+uThN+8UyUAyjLbkv0/eWf6fPUlSxKVQS4msShqSBlmg6L4gFKNcAIACBAFIQSjX+1MYNDMTIDgtAZVmFhhuAaEwK+CiKocb1wRhua7eqjw2huQUAMvsARDZbgCV6QEw2Z4jFOY9uHh8B7fsYBCMyBtStSgs0WZLnyODun+DbgXiMZM5HRFmj8rQmojPTisDriHtpBXWSwqL8+kuGZP2FC2Sa0OljmPqph2P6p0wm4xE4nrCjk/KgFO42nEStUVFZtWFCgPxKIQ2NsnHIQXp/DbQWQLiYkyvsEMUPj9KClkjwsduyGmKGiRbklW6rkSh4g5Ely7WKedWdklaK6SUw2HSmWxxUbpO8EgRmojTJaorTZICHIVWD4gl1CrC+cyuusLlDdE3XAQgkGGVoIQRhbjADhkTpi8WCvomLS9OW3wAAA==') format('woff2'),
  url('./iconfont.woff?t=1553066355757') format('woff'),
  url('./iconfont.ttf?t=1553066355757') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('./iconfont.svg?t=1553066355757#iconfont') format('svg'); /* iOS 4.1- */

3.使用createGlobalStyle api進行全局注入

import { createGlobalStyle } from 'styled-components';

export const GlobalIconfont = createGlobalStyle`........`

二. react-transition-group

三. immutable.js

常用方法

//基本轉化
1.轉化爲immutable對象
import { fromJS } from 'immutable';
let immutable = fromJS(data);
2.轉化爲普通js對象
immutable.toJS()

//獲取/設置屬性
immutable.get('key')
immutable.set('key')

//獲取嵌套屬性
* 如想獲取person.address.home, list是immutable:
person.getIn(['address', 'home])

//設置多個屬性
state.merge({
	key1: v1,
	key2, v2
})

四.react全家桶目錄結構

項目放在src目錄下:

(1)common存放通用的組件, 如header組件, 組件內部進行數據管理, 樣式管理, style.js使用的是styledComponents.js進行css模塊化, store

store/index.js: 將其餘三個文件導入並統一導出, 這樣有利於文件路徑的管理

import reducer from './reducer';
import * as actionCreators from './actionCreators';
import * as constants from './constants';

export { reducer, actionCreators, constants };

actionCreator.js: 統一創建action,

• 同步: 返回一個action對象
• 異步: 加入redux-thunk中間件之後, 可以返回一個接受dispatch的函數, 尤其在發送在ajax請求時用到

import * as constants from './constants';
import { fromJS } from 'immutable';
import axios from 'axios';

export const mouseLeave = () => ({
	type: constants.MOUSE_LEAVE
});

export const getList = () => {
	return (dispatch) => {
		axios.get('/api/headerList.json').then((res) => {
			const data = res.data;
			dispatch(changeList(data.data));
		}).catch((err) => {
			console.log(err');
		})
	}
};

constants.js: 保管事件名的常量, 被actionCreator和reducer使用,事件名前面可以加組件的名稱作爲命名空間, 如header, 好處在與打錯變量名的時候容易快速debug

export const SEARCH_FOCUS = 'header/SEARCH_FOCUS';
export const SEARCH_BLUR = 'header/SEARCH_BLUR';

reduer.js:

• 申明默認的state, 並且在src/store/reducer下進行combineReducers時使用組件名進行命名空間管理

import * as constants from './constants';
import { fromJS } from 'immutable';

const defaultState = fromJS({
	focused: false,
	mouseIn: false,
	list: [],
	page: 1,
	totalPage: 1
});

export default (state = defaultState, action) => {
	switch(action.type) {
		case constants.SEARCH_FOCUS:
			return state.set('focused', true);
		case constants.SEARCH_BLUR:
			return state.set('focused', false);
		case constants.CHANGE_LIST:
			return state.merge({
				list: action.data,
				totalPage: action.totalPage
			});
		case constants.MOUSE_ENTER:
			return state.set('mouseIn', true);
		case constants.MOUSE_LEAVE:
			return state.set('mouseIn', false);
		case constants.CHANGE_PAGE:
			return state.set('page', action.page);
		default:
			return state;
	}
}

(2) store進行整體數據保存

reducer.js: 引入所有組件的reducer, 組合成一個新的reducer返回出去**, 使用組件名進行命名空間管理**

import { combineReducers } from 'redux-immutable';
import { reducer as headerReducer } from '../common/header/store';
import { reducer as homeReducer } from '../pages/home/store';
import { reducer as detailReducer } from '../pages/detail/store';
import { reducer as loginReducer } from '../pages/login/store';

const reducer = combineReducers({
	header: headerReducer,
	home: homeReducer,
	detail: detailReducer,
	login: loginReducer
});

export default reducer;

index.js: 生成store對象並導出

import { createStore, compose, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import reducer from './reducer';

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(reducer, composeEnhancers(
	applyMiddleware(thunk)
));

export default store;

(3)pages存放單個頁面

• 頁面的拆分成小的組件, 使用components文件夾進行管理
• style.js和store進行該頁面的所有樣式和數據管理

(4)statics存放圖片資源

五.異步組件與react-loadable