Vue 筝尾，React 界弧，Angular 三大主流框架凡蜻，各有所長(zhǎng)，但是React的社區(qū)相對(duì)于Vue和Angular是最為活躍垢箕，雖然近年來國(guó)內(nèi)大牛開源的Vue框架划栓，一起簡(jiǎn)單上手，發(fā)展比較快条获。
這里從github上的截圖做個(gè)比較
React 是什么
React 其實(shí)只是一個(gè) UI 框架忠荞，頻繁進(jìn)行 DOM 操作的代價(jià)是很昂貴的，所以 React 使用了虛擬 DOM 的技術(shù)帅掘，每當(dāng)狀態(tài)發(fā)生改變委煤，就會(huì)生成新的虛擬 DOM 并與原本的進(jìn)行改變，讓變化的地方去渲染修档。并且為了性能的考慮碧绞，只對(duì)狀態(tài)進(jìn)行淺比較（這是一個(gè)很大的優(yōu)化點(diǎn)）。
React 已經(jīng)成為當(dāng)今最流行的框架之一吱窝，但是他的學(xué)習(xí)成本并不低并且需要你有一個(gè)良好的 JS 基礎(chǔ)讥邻。由于React 只是一個(gè) UI 框架寓免，所以你想完成一個(gè)項(xiàng)目，你就得使用他的全家桶计维。
React 組件
如何寫好規(guī)劃好一個(gè)組件決定了你的 React 玩的溜不溜袜香。一個(gè)組件你需要考慮他提供幾個(gè)對(duì)外暴露的接口，內(nèi)部狀態(tài)通過局部狀態(tài)改變還是全局狀態(tài)改變好鲫惶。并且你的組件應(yīng)該是利于復(fù)用和維護(hù)的蜈首。
組件的生命周期
render 函數(shù)會(huì)在 UI 渲染時(shí)調(diào)用，你多次渲染就會(huì)多次調(diào)用欠母，所以控制一個(gè)組件的重復(fù)渲染對(duì)于性能優(yōu)化很重要
componentDidMount 函數(shù)只會(huì)在組件渲染以后調(diào)用一次欢策，通常會(huì)在這個(gè)發(fā)起數(shù)據(jù)請(qǐng)求
shouldComponentUpdate 是一個(gè)很重要的函數(shù)，他的返回值決定了是否需要生成一個(gè)新的虛擬 DOM 去和之前的比較赏淌。通常遇到的性能問題你可以在這里得到很好的解決
componentWillMount 函數(shù)會(huì)在組件即將銷毀時(shí)調(diào)用踩寇，項(xiàng)目中在清除聊天未讀消息中用到了這個(gè)函數(shù)
父子組件參數(shù)傳遞
在項(xiàng)目中我使用的方式是單個(gè)模塊頂層父組件通過 connect 與 Redux 通信。子組件通過參數(shù)傳遞的方式獲取需要的參數(shù)六水，對(duì)于參數(shù)類型我們應(yīng)該規(guī)則好俺孙，便于后期 debug。
性能上考慮掷贾，我們?cè)趨?shù)傳遞的過程中盡量只傳遞必須的參數(shù)睛榄。
路由
在 React-router 4.0 版本，官方也選擇了組件的方式去書寫路由想帅。
下面介紹一下項(xiàng)目中使用到的按需加載路由高階組件
import React, { Component } from "react";
// 其實(shí)高階組件就是一個(gè)組件通過參數(shù)傳遞的方式生成新的組件
export default function asyncComponent(importComponent) {
class AsyncComponent extends Component {
constructor(props) {
super(props);
// 存儲(chǔ)組件
this.state = {
component: null
};
}
async componentDidMount() {
// 引入組件是需要下載文件的场靴，所以是個(gè)異步操作
const { default: component } = await importComponent();
this.setState({
component: component
});
}
// 渲染時(shí)候判斷文件下完沒有，下完了就渲染出來
render() {
const C = this.state.component;
return C ? <C {...this.props} /> : null;}
}
return AsyncComponent;
}
Redux
Redux 通常是個(gè)另新手困惑的點(diǎn)港准。首先旨剥，不是每個(gè)項(xiàng)目都需要使用 Redux，組件間通信不多浅缸，邏輯不復(fù)雜轨帜，你也就不需要使用這個(gè)庫，畢竟這個(gè)使用這個(gè)庫的開發(fā)成本很大疗杉。
Redux 是與 React 解耦的阵谚，所以你想和 Redux 通信就需要使用 React-redux蚕礼，你在 action 中使用異步請(qǐng)求就得使用 Redux-thunk烟具，因?yàn)?action 只支持同步操作。
Redux 的組成
Redux 由三部分組成：action奠蹬，store朝聋，reducer。
Action 顧名思義囤躁，就是你發(fā)起一個(gè)操作冀痕，具體使用如下：
export function getOrderSuccess(data) {
// 返回的就是一個(gè) action荔睹，除了第一個(gè)參數(shù)一般這樣寫，其余的參數(shù)名隨意
return { type: GET_ORDER_SUCCESS, payload: data };
}
Action 發(fā)出去以后言蛇，會(huì)丟給 Reducer僻他。Reducer 是一個(gè)純函數(shù)（不依賴于且不改變它作用域之外的變量狀態(tài)的函數(shù)），他接收一個(gè)之前的 state 和 action 參數(shù)腊尚，然后返回一個(gè)新的 state 給 store吨拗。
switch (action.type) {
> case GET_ALL_ORDERS:
return state.set("allOrders", action.payload);
default:
break;
}
return state;
}
Store 很容易和 state 混淆。你可以把 Store 看成一個(gè)容器婿斥，state 存儲(chǔ)在這個(gè)容器中劝篷。Store 提供一些 API 讓你可以對(duì) state 進(jìn)行訪問，改變等等民宿。
