Weekly sharing 05 (20190408)

One

1、不要太乖，不想做的事可以拒絕，做不到的事不用勉強(qiáng)，不喜歡的話假裝沒(méi)聽(tīng)見(jiàn)。人生不是用來(lái)討好別人的，而是要善待自己。永遠(yuǎn)都要活給自己看，而且笑容要特別燦爛，別在乎別人的指指點(diǎn)點(diǎn)，做好你自己。

知新

1、在vue內(nèi)對(duì)v-html動(dòng)態(tài)生成的內(nèi)容設(shè)置樣式
v-html綁定渲染出的內(nèi)容可以理解為是子組件的內(nèi)容，所以當(dāng)你頁(yè)面css設(shè)置scoped屬性，會(huì)導(dǎo)致css僅對(duì)當(dāng)前組件生效，子組件不會(huì)被加上對(duì)應(yīng)的屬性，此時(shí)無(wú)需設(shè)置scoped屬性。

溫故

Redux（from 阮一峰老師的教程）

1、適用場(chǎng)景

UI層非常簡(jiǎn)單，沒(méi)有很多互動(dòng)，Redux 就是不必要的，本身redux就是為了增加組件通信，優(yōu)化代碼結(jié)構(gòu)。
需要使用：多交互，多數(shù)據(jù)源

用戶的使用方式復(fù)雜
不同身份的用戶有不同的使用方式（比如普通用戶和管理員）
多個(gè)用戶之間可以協(xié)作
與服務(wù)器大量交互，或者使用了WebSocket
View要從多個(gè)來(lái)源獲取數(shù)據(jù)
某個(gè)組件的狀態(tài)，需要共享
某個(gè)狀態(tài)需要在任何地方都可以拿到
一個(gè)組件需要改變?nèi)譅顟B(tài)
一個(gè)組件需要改變另一個(gè)組件的狀態(tài)

2、設(shè)計(jì)思想

（1）Web 應(yīng)用是一個(gè)狀態(tài)機(jī)，視圖與狀態(tài)是一一對(duì)應(yīng)的。
（2）所有的狀態(tài)，保存在一個(gè)對(duì)象里面。

3、基本概念和API

1）store
保存數(shù)據(jù)的地方，即數(shù)據(jù)容器，一個(gè)應(yīng)用只能有一個(gè)store。
使用createStore函數(shù)生成 Store：

import { createStore, compose, applyMiddleware } from 'redux'
const store = createStore();
export default store;

2）state
想得到某個(gè)時(shí)點(diǎn)的數(shù)據(jù)，就要對(duì) Store 生成快照，這種時(shí)點(diǎn)的數(shù)據(jù)集合，就叫做 State。
獲得數(shù)據(jù)：store.getState();
一個(gè) State 對(duì)應(yīng)一個(gè) View。只要 State 相同，View 就相同。
3）action
Action 就是 View 發(fā)出的通知，表示 State 應(yīng)該要發(fā)生變化了。
Action 是一個(gè)對(duì)象，其中的type屬性是必須的，表示 Action 的名稱，其他屬性可以自由設(shè)置。
4）actionCreator
統(tǒng)一管理action，將需要使用到的action全部寫(xiě)在一個(gè)文件，在需要使用的頁(yè)面進(jìn)行引入；
5）store.dispatch（派發(fā)）
是 View 發(fā)出 Action 的唯一方法，與vuex類(lèi)似，接受一個(gè) Action 對(duì)象作為參數(shù)，將它發(fā)送出去。

handleInputBlur() {
    dispatch(actionCreators.inputToggle(false));
},

6）reducer
Store 收到 Action 以后，必須給出一個(gè)新的 State，這樣 View 才會(huì)發(fā)生變化。這種 State 的計(jì)算過(guò)程就叫做 Reducer。
且必須要是純函數(shù)（給定固定輸入，一定有固定輸出，且不會(huì)有任何副作用，輸入和輸出一一映射，不會(huì)對(duì)其他數(shù)據(jù)產(chǎn)生影響）。
純函數(shù)：

不得改寫(xiě)參數(shù)
不能調(diào)用系統(tǒng) I/O 的API
不能調(diào)用Date.now()或者Math.random()等不純的方法，因?yàn)槊看螘?huì)得到不一樣的結(jié)果

在此情況下需要每次的state都能得到相應(yīng)的結(jié)果，因此Reducer 函數(shù)里面不能改變 State，必須返回一個(gè)全新的對(duì)象。

const defaultState = fromJS({
  inputFocus: false,
  searchList: [],
  page: 1,
  totalPage: 1,
  mouseStatus: false
});

export default (state = defaultState, action) => {
  switch (action.type) {
    case actionTypes.INPUT_FOCUS:
      if (action.inputFocus && !state.get('searchList').length && action.searchList) {
        //第一次獲得焦點(diǎn)獲取數(shù)據(jù)
        return state.merge({
          searchList: action.searchList,
          totalPage: action.totalPage,
          inputFocus: action.inputFocus
        });
      }
      else return state.set('inputFocus', action.inputFocus);
    case actionTypes.MOUSE_TOGGLE:
      return state.set('mouseStatus', action.mouseStatus);
    case actionTypes.CHANGE_PAGE:
      let _page = state.get('page'), _total = state.get('totalPage');
      if(_page < _total) _page++;
      else _page = 1;
      return state.set('page', _page);
  }
  return state;
}

store.dispatch方法會(huì)觸發(fā) Reducer 的自動(dòng)執(zhí)行，所以在生成 Store 的時(shí)候，需要將 Reducer 傳入createStore方法。

import { createStore, compose, applyMiddleware } from 'redux'
import reducer from './reducer'
const store = createStore(reducer);
export default store;

7）store.subscribe()
在頁(yè)面內(nèi)對(duì)store的變化進(jìn)行監(jiān)聽(tīng)：

//對(duì)store進(jìn)行訂閱
store.subscribe(this.handleStoreChange);

4、store的實(shí)現(xiàn)

三個(gè)方法：

store.getState()
store.dispatch()
store.subscribe()

createStore方法還可以接受第二個(gè)參數(shù)，表示 State 的最初狀態(tài)。
想要在chrome使用redux查看工具，需要在創(chuàng)建store時(shí)傳入?yún)?shù)window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()

const store = createStore(
    reducer,
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);

5、reducer的拆分

reducer負(fù)責(zé)state的生成，在項(xiàng)目足夠龐大的情況下，reducer也將會(huì)越來(lái)越大，此時(shí)可將reducer根據(jù)模塊或者頁(yè)面進(jìn)行拆分，不同的函數(shù)負(fù)責(zé)處理不同屬性，最終把它們合并成一個(gè)大的 Reducer 即可。
Redux 提供了一個(gè)combineReducers方法，用于 Reducer 的拆分。你只要定義各個(gè)子 Reducer 函數(shù)，然后用這個(gè)方法，將它們合成一個(gè)大的 Reducer。

import { combineReducers } from 'redux';//此時(shí)生成的數(shù)據(jù)都是immutable格式
import { reducer as headerReducer } from '../components/header/store';
import { reducer as HomeReducer } from '../views/home/store';

const reducer = combineReducers({
    header: headerReducer,
    home: HomeReducer
});

export default reducer;

該函數(shù)根據(jù)state的key去執(zhí)行相應(yīng)的子reducer。

    inputFocus: state.getIn(['header', 'inputFocus']),
    searchList: state.getIn(['header', 'searchList']),
    page: state.getIn(['header', 'page']),
    mouseStatus: state.getIn(['header', 'mouseStatus'])

6、工作流程

[圖片上傳失敗...(image-f408ff-1555312083548)]

用戶觸發(fā)action --> Store 自動(dòng)調(diào)用 Reducer，并且傳入兩個(gè)參數(shù)：當(dāng)前 State 和收到的 Action然后返回新的 State --> state發(fā)生變化之后，觸發(fā)監(jiān)聽(tīng)函數(shù)，重新渲染視圖。
createStore - store.dispatch（派發(fā)） - store.getState - store.subscribe（訂閱）;

7、異步操作

希望reducer能在異步操作之后自動(dòng)執(zhí)行，則需要中間件（middleware）。
action和store之間，相當(dāng)于對(duì)dispatch方法的封裝升級(jí)，在發(fā)出 Action 和執(zhí)行 Reducer 這兩步之間，添加了其他功能，dispatch的參數(shù)可以是函數(shù)，如果參數(shù)是對(duì)象則直接傳給store，如果參數(shù)是函數(shù)則操作函數(shù)，如果有需要對(duì)store進(jìn)行操作再進(jìn)行操作。
1）中間件的用法

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

const store = createStore(reducer, applyMiddleware(thunk));

export default store;

中間件次序：下面applyMiddleware方法的三個(gè)參數(shù)，就是三個(gè)中間件。有的中間件有次序要求，使用前要查一下文檔。比如，logger就一定要放在最后，否則輸出結(jié)果會(huì)不正確。

const store = createStore(
  reducer,
  applyMiddleware(thunk, promise, logger)
);

2）applyMiddlewares()
作用是將所有中間件組成一個(gè)數(shù)組，依次執(zhí)行。它的源碼：

export default function applyMiddleware(...middlewares) {
  return (createStore) => (reducer, preloadedState, enhancer) => {
    var store = createStore(reducer, preloadedState, enhancer);
    var dispatch = store.dispatch;
    var chain = [];

    var middlewareAPI = {
      getState: store.getState,
      dispatch: (action) => dispatch(action)
    };
    chain = middlewares.map(middleware => middleware(middlewareAPI));
    dispatch = compose(...chain)(store.dispatch);

    return {...store, dispatch}
  }
}

所有中間件被放進(jìn)了一個(gè)數(shù)組chain，然后嵌套執(zhí)行，最后執(zhí)行store.dispatch?？梢钥吹?，中間件內(nèi)部（middlewareAPI）可以拿到getState和dispatch這兩個(gè)方法。

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

Weekly sharing 05 (20190408)