摘要：在列表的渲染中不推薦使用循環(huán)的下標(biāo)作為在列表的渲染中，如果對(duì)列表某條數(shù)據(jù)刪除會(huì)改變其上下的組件的改變?cè)龃蠼M件的復(fù)用性

使用官方提供的react腳手架搭建的小型項(xiàng)目：create-react-app

react中使用路由react-router-dom

單向數(shù)據(jù)流使用的是redux，通過redux-thunk中間件實(shí)現(xiàn)異步操作

使用單向數(shù)據(jù)流與路由中，通過props逐級(jí)傳遞有點(diǎn)麻煩，性能不佳，使用中間件形式的react-redux構(gòu)造裝飾器，可以訪問全局?jǐn)?shù)據(jù)流

在react項(xiàng)目中還是用了懶加載react-loadable

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

# react 的基本組件生命周期如下
1. constructor 組件的構(gòu)造函數(shù)：接受父組件的參數(shù)，初始化state，綁定函數(shù)等等的操作
2. componentWillMount 組件渲染之前，每次組件渲染都會(huì)觸發(fā)一次
3. componentDidMount 組件渲染之后，每次組件渲染都會(huì)觸發(fā)一次，子組件都掛載好，可以使用refs，可以使用異步方法，防止阻塞UI
4. componentWillReceiveProps 該函數(shù)接收到新的props才會(huì)被調(diào)用，render不會(huì)觸發(fā)該函數(shù)
5. shouldComponentUpdate 在組件接收到新的props或者state時(shí)被調(diào)用。在初始化時(shí)或者使用forceUpdate時(shí)不被調(diào)用。 
6. componentWillUpdate 該函數(shù)接收到新的props或者state與render之前才會(huì)被調(diào)用，初始化不會(huì)觸發(fā)該函數(shù)
7. componentDidUpdate 該函數(shù)在組件完成更新后立即調(diào)用。在初始化時(shí)不會(huì)被調(diào)用。
8. componentWillUnmount 該函數(shù)為組件被移除(卸載)時(shí)被調(diào)用
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(
            
展示APP頁面
        );
    }
}

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(
        

            
                

                    
                    
                    
                    
                
            
            

                頁面一
                頁面二
                頁面三
                頁面四
            
            
        
    );
}

redux

redux分為3各部分

store ：數(shù)據(jù)，store全局僅有唯一的store

action： 操作，通過觸發(fā)action改變store的狀態(tài)，stroe的狀態(tài)不能不能直接修改

Reducers 執(zhí)行，通過action反饋的操作去執(zhí)行，直接修改store的狀態(tài)

redux 在大型項(xiàng)目中可與 vuex 一樣實(shí)現(xiàn)模塊化管理。redux 通過自帶的函數(shù) combineReducers 對(duì)自身切割分為多個(gè)模塊。

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如何被不同路由下的組件使用與訪問

在react的入口文件中注入store，使其可以被全局路由訪問

在對(duì)應(yīng)的組件中引入需用的actino，stroe是直接訪問全局的，action是按需引入

以下為例子

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（前提是需訪問的組件引入對(duì)應(yīng)的redux）
ReactDOM.render(
    (
        
            
        
    ),
    document.getElementById("root")
);

react可優(yōu)化的各方面

在react 16 之前的版本可以通過簡單的遍歷組件中的props或者state數(shù)據(jù)的變化監(jiān)聽數(shù)據(jù)是否被更新，來控制組件的渲染，一個(gè)正常的組件在父組件的狀態(tài)被改變的情況下，會(huì)觸發(fā)render，如果是列表之類的組件render多了就會(huì)性能差，可以通過 shouldComponentUpdate 鉤子函數(shù)來決定組件是否接受更新

在react 16后，官方提出類似Component的接口 PureComponent，react可以自動(dòng)幫你決定組件是否接受更新

在組件的使用時(shí)，必須對(duì)其賦于 全局唯一的KEY。在列表的渲染中不推薦使用循環(huán)的下標(biāo)作為 key 在列表的渲染中，如果對(duì)列表某條數(shù)據(jù)刪除會(huì)改變其上下的組件的 key 改變

增大組件的復(fù)用性