初次入坑 React

React

有關使用包

1. 使用官方提供的react腳手架搭建的小型項目：create-react-app
2. react中使用路由react-router-dom
3. 單向數據流使用的是redux，經過redux-thunk中間件實現異步操做
4. 使用單向數據流與路由中，經過props逐級傳遞有點麻煩，性能不佳，使用中間件形式的react-redux構造裝飾器，能夠訪問全局數據流

5. 在react項目中仍是用了懶加載react-loadable

   import Loadable from 'react-loadable'
   const Loading = ({      //自定義公用加載時頁面
       pastDelay,
       timedOut,
       error
   }) => {
       if(pastDelay) {
           return <div></div>;
       } else if(timedOut) {
           return <div>Taking a long time...</div>;
       } else if(error) {
           return <div>Error!</div>;
       }
       return null;
   }
   //路由中頁面  懶加載 view
   const MusicIndex = Loadable({
       loader: () =>
           import('./component/MusicIndex/MusicIndex'),
       loading: Loading,
       timeout: 10000
   })

react中的生命週期

# react 的基本組件生命週期以下
1. constructor 組件的構造函數：接受父組件的參數，初始化state，綁定函數等等的操做
2. componentWillMount 組件渲染以前，每次組件渲染都會觸發一次
3. componentDidMount 組件渲染以後，每次組件渲染都會觸發一次，子組件都掛載好，能夠使用refs，能夠使用異步方法，防止阻塞UI
4. componentWillReceiveProps 該函數接收到新的props纔會被調用，render不會觸發該函數
5. shouldComponentUpdate 在組件接收到新的props或者state時被調用。在初始化時或者使用forceUpdate時不被調用。 
6. componentWillUpdate 該函數接收到新的props或者state與render以前纔會被調用，初始化不會觸發該函數
7. componentDidUpdate 該函數在組件完成更新後當即調用。在初始化時不會被調用。
8. componentWillUnmount 該函數爲組件被移除(卸載)時被調用
class App extends Component {
    constructor(props) {
        super(props)
    }
    componentWillMount(){}
    componentDidMount() {}
    componentWillReceiveProps(newProps) {}
    shouldComponentUpdate(newProps, newState) {
        return true;
    }
    componentWillUpdate(nextProps, nextState) {}
    componentDidUpdate(prevProps, prevState) {}
    componentWillUnmount() {}
    render() {
        return(
            <div className="App">展現APP頁面</div>
        );
    }
}

react中使用路由

import { HashRouter as Router, Route, Link } from "react-router-dom"
import { MusicIndex } from "./../MusicIndex.js"
import { MusicRanking } from "./../MusicRanking.js"
import { MusicCollection } from "./../MusicCollection.js"
import { MusicPersonal } from "./../MusicPersonal.js"

render() {
    return(
        <div className="App">
            <Router>
                <div className="app-box-view">
                    <Route exact path="/" component={ MusicIndex } />
                    <Route path="/ranking" component={ MusicRanking } />
                    <Route path="/collection" component={ MusicCollection } />
                    <Route path="/personal" component={ MusicPersonal } />
                </div>
            </Router>
            <div className="App-tabbar">
                <span onClick={ window.location.hash = '/'}>頁面一</span>
                <span onClick={ window.location.hash = '/ranking'}>頁面二</span>
                <span onClick={ window.location.hash = '/collection'}>頁面三</span>
                <span onClick={ window.location.hash = '/personal'}>頁面四</span>
            </div>
            <Audio></Audio>
        </div>
    );
}

react中使用單向數據流redux

redux

• redux分爲3各部分

  1. store ：數據，store全局僅有惟一的store
  2. action： 操做，經過觸發action改變store的狀態，stroe的狀態不能不能直接修改
  3. Reducers 執行，經過action反饋的操做去執行，直接修改store的狀態
• redux 在大型項目中可與 vuex 同樣實現模塊化管理。redux 經過自帶的函數 combineReducers 對自身切割分爲多個模塊。

redux例子

1. redux分割例子
import { combineReducers } from "redux"
import { albumItem } from './reducers/MusicAlbumItem'
import { ranking } from './reducers/MusicRanking'
import { user } from './reducers/MusicUser'
import { collection } from './reducers/MusicCollection'

export const rootReducer = combineReducers({
    player,
    ranking,
    user,
    collection
})

2. 單獨分割出來redux的例子
const R_CHANGE = "改變緩存排行版"
const R_INIT = "重置排行版"
const R_LOADING = "排行版列表加在完畢"
//如下爲store
let rankingStore = {
    rank:[],
    target:{
        id:0,
        playlist:{}
    },
    loading:true
}
//如下爲reducers
export const ranking = (state = rankingStore, action) => {
    switch(action.type) {
        case R_INIT:
            state.rank = action.list
            return Object.assign({}, state)
        case R_CHANGE:
            state.target = action.list
            return Object.assign({}, state)
        case R_LOADING:
            state.loading = false
            return Object.assign({}, state)
        default:
            return state
    }
}
//如下爲action
export function r_change(list) {
    return {
        type: R_CHANGE,
        list:list
    }
}
export function r_init(list) {
    return {
        type: R_INIT,
        list:list
    }
}
export function r_loading() {
    return {
        type: R_LOADING
    }
}

redux如何被不一樣路由下的組件使用與訪問

1. 在react的入口文件中注入store，使其能夠被全局路由訪問
2. 在對應的組件中引入需用的actino，stroe是直接訪問全局的，action是按需引入
3. 如下爲例子

import React from 'react';
import ReactDOM from 'react-dom'
import { createStore, applyMiddleware, compose } from 'redux'
import { BrowserRouter } from 'react-router-dom'
import registerServiceWorker from './registerServiceWorker'
import './index.css'
import App from './App'
import { rootReducer } from './redux/index'
import thunk from 'redux-thunk'
import { Provider } from 'react-redux'

const store = createStore(rootReducer, compose(
    applyMiddleware(thunk),
    window.devToolsExtension ? window.devToolsExtension() : f => f
))
//經過路由注入store，使其可被全局訪問stroe（前提是需訪問的組件引入對應的redux）
ReactDOM.render(
    (<Provider store={store}>
        <BrowserRouter>
            <App />
        </BrowserRouter>
    </Provider>),
    document.getElementById('root')
);

react可優化的各方面

1. 在react 16 以前的版本能夠經過簡單的遍歷組件中的props或者state數據的變化監聽數據是否被更新，來控制組件的渲染，一個正常的組件在父組件的狀態被改變的狀況下，會觸發render，若是是列表之類的組件render多了就會性能差，能夠經過 shouldComponentUpdate 鉤子函數來決定組件是否接受更新
2. 在react 16後，官方提出相似Component的接口 PureComponent，react能夠自動幫你決定組件是否接受更新
3. 在組件的使用時，必須對其賦於 全局惟一的KEY。在列表的渲染中不推薦使用循環的下標做爲 key 在列表的渲染中，若是對列表某條數據刪除會改變其上下的組件的 key 改變
4. 增大組件的複用性