react梳理回顾(一)

已经使用react2年左右了，打算梳理一下，想到什么就写一点啦。
涉及内容（在一个项目中会用到的一些关键内容或者词汇）：
react，MVC，虚拟 dom(render树，Diff算法), JSX，function，class，state，props ... route...redux，actions(fetch，可以是其他) reducers 中间件(常用redux-thunk或redux-saga) dispatch(types) connect，bindActionCreators ...package（依赖，组件包）create-react-app (快速搭建) git（项目管理）另外，还需要一个可爱的你

1 react

react属于MVC（modal view controller）框架，可使用JSX（JavaScript扩展语法）数据流为单向响应(单项方便追查问题)。
虚拟 dom：可以高效的渲染页面，将对真实dom的多次操作经过diff算法存入js对象一次操作，节省真实dom的操作。
diff算法：我理解上是通过二叉树模式的虚拟dom进行逐层的比较，找出变化的第一个节点，更替本身及以下内容，保留其它，功能上来说，减少dom操作以及渲染影响范围从而减少我们的性能烦恼。
props: 传入组件，改变会造成页面渲染（reducers派发，父组件传入等）
state: 组件内部，改变会造成页面渲染（不用渲染页面时的内部数据传递使用this.name）
生命周期：componentWillMount(渲染前) componentDidMount(第一次渲染后，此时一般会发送获取需要数据的action) componentWillReceiveProps(收到新的prop后页面更新前，常用语发送action后获取到新数据的时候进行数据保存和调整) shouldComponentUpdate(接收到新的prop或者state时调用) componentWillUpdate(接收到新的prop或者state后页面更新前) componentWillUnmount(组件从 DOM 中移除之前，此处通常停止一些计时器之类的操作)
antd：常用的react ui框架，有皮肤的感念。

2 route

/**
 * 项目入口
 */

import React, { Component } from 'react';
import { Provider } from 'react-redux'
import { Route, BrowserRouter, Switch } from 'react-router-dom'

import configureStore from './redux/configureStore'
import './App.css';
import Login from './containers/login'
import Main from './containers/main'

const store = configureStore()

class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <BrowserRouter>
          <Switch>
            <Route path="/login" component={Login}/>
            <Route path='/' component={Main}/>
          </Switch>
        </BrowserRouter>
      </Provider>
    );
  }
}

export default App;

中间件

/**
 * @desc react-router-redux及history配置
 **/

import { createStore, combineReducers, applyMiddleware, compose } from 'redux'
import thunkMiddleware from 'redux-thunk'
//import { routerReducer, routerMiddleware } from 'react-router-redux'

import * as reducers from './reducers'


export default function configureStore(history, initialState) {
  const reducer = combineReducers({
    ...reducers,
    //routing: routerReducer,
  })

  const store = createStore(
    reducer,
    initialState,
    compose(
      applyMiddleware(
        thunkMiddleware,
        //routerMiddleware(history),
      ),
    ),
  )
  return store
}

主要中间件：redux-thunk或者redux-saga
都是负责异步操作，redux-saga相对复杂，可以在请求的各个阶段进行操作。