1.如果你熟悉 HTML，那么 JSX 對于你來說是沒有任何壓力的，因為 HTML 中的所有標簽，在 JSX 中都是支持的，基本上沒有學習成本，只有如下幾點略微的不同：
·?class 屬性變?yōu)?className
·?tabindex 屬性變?yōu)?tabIndex
·?for 屬性變?yōu)?htmlFor
·?textarea 的值通過需要通過 value 屬性來指定
·?style 屬性的值接收一個對象，css 的屬性變?yōu)轳劮鍖懛ǎ纾篵ackgroundColor。
2.需要注意，不管那種方式，組件的名稱首字母必須為大寫。嚴格來說，是 JSX 要求用戶自定義的組件名首字母必須為大寫
3.屬性必須為只讀的，這一點非常重要，請嚴格遵守。對應到上面說到的，如果把組件理解為一個函數(shù)，那么這個函數(shù)必須為一個純函數(shù)（Pure function），在純函數(shù)中不能修改其參數(shù)，確定的輸入必須有確定的輸出。
雖然有些時候，你修改了組件的屬性，貌似也能正常工作。沒錯，因為 JavaScript 語言特性的原因，沒人能阻止你這么做。但是請先相信我，嚴格遵守這條規(guī)則不僅能讓你少踩很多坑，而且能讓你的應用穩(wěn)定性更強、維護性更強。如果你直接修改組件的屬性，React 并不會感知到此修改，從而不會重新渲染組件，就導致了當前組件的視圖展示與數(shù)據(jù)不一致。
4.?React 提供了相應的機制可以設置組件屬性的默認值，如下所示，你需要通過組件的靜態(tài)字段?defaultProps?來設置組件屬性的默認值。如下所示：
import?React, {Component} from 'react';
class?HelloMessage?extends?Component?{
????render() {
????????return?<div>Hello?{this.props.name}.</div>;
????}
}HelloMessage.defaultProps = {
????name: 'World'
}
這樣就可以了，<HelloMessage />?這樣不為組件設置任何屬性，那么它就會在頁面上展示Hello World.。
5.?我期望其?name?屬性只能是字符串類型的，你要是給我一個 Object，我是沒法正確展示的。為了在開發(fā)過程中盡快的發(fā)現(xiàn)這類問題，React 為組件添加了類型檢查的機制，你需要給組件設置靜態(tài)字段?propTypes?來設置組件各個屬性的類型檢查器。
import?React, {Component} from 'react';
import?PropTypes?from 'prop-types';
class?HelloMessage?extends?Component?{
????render() {
????????return?<div>Hello?{this.props.name}.</div>;
????}
}HelloMessage.defaultProps = {
????name: 'World'
}HelloMessage.propTypes = {
????name: PropTypes.string
}
6.下面是 React 提供的可用的數(shù)據(jù)類型檢查器。
·?PropTypes.array
·?PropTypes.bool
·?PropTypes.func
·?PropTypes.number
·?PropTypes.object
·?PropTypes.string
·?PropTypes.symbol
·?PropTypes.element?元素，其實就是 JSX 表達式，上一篇文章有說過 JSX 是?React.createElement?的語法糖，一個 JSX 表達式實際上會生成一個 JS 對象，在 React 中稱之為元素（Element）。
·?PropTypes.node?所有可以被渲染的數(shù)據(jù)類型，包括：數(shù)值, 字符串, 元素或者這些類型的數(shù)組。
·?PropTypes.instanceOf(Message)?某個類的實例
·?PropTypes.oneOf(['News', 'Photos'])?枚舉，屬性值必須為其中的某一個值。
·?PropTypes.oneOfType([PropTypes.string, PropTypes.number])?類型枚舉，屬性必須為其中某一個類型。
·?PropTypes.arrayOf(PropTypes.number)?屬性為一個數(shù)組，且數(shù)組中的元素必須符合指定類型。
·?PropTypes.objectOf(PropTypes.number)?屬性為一個對象，且對象中的各個字段的值必須符合指定類型。
·?PropTypes.any?任何類型
如果你想指定某些屬性為必需屬性，你可以鏈式調動其?isRequired?來標識某個屬性對于當前組件來說是必需的。
7.設置組件的屬性值
屬性的值可以用一對大括號?{ }?來包圍，其中可以指定任意的 JavaScript 表達式。如下所示：
return?(
????<User
????????name="Tom"????????????????????????????// 字符串
????????age={18} ?????????????????????????????// 數(shù)值
????????isActivated={true} ???????????????????// 布爾值
????????interests={['basketball', 'music']} ??// 數(shù)組
????????address={{ city:?'Beijing', road:?'BeiWuHuan'?}} // 對象
????/>
)
8.ReactDOM.render 在一個單頁面 web 應用中通常只調用一次。
組件可以通過 setState 改變內部狀態(tài) state 來更新視圖。
setState 多數(shù)情況下是異步的。
不要直接使用當前 state 的值生成下一個 state。
不要直接通過 this.state 修改 state。
9.
?
?
?
?
擴展運算符
擴展運算符用三個點號表示，功能是把數(shù)組或類數(shù)組對象展開成一系列用逗號隔開的值
var?foo = function(a, b, c) {
????console.log(a);
????console.log(b);
????console.log(c);
}
var?arr = [1, 2, 3];
//傳統(tǒng)寫法
foo(arr[0], arr[1], arr[2]);
//使用擴展運算符foo(...arr);//1
//2
//3
?
ES6 yield
一、介紹
yield 關鍵字用來暫停和繼續(xù)一個生成器函數(shù)。我們可以在需要的時候控制函數(shù)的運行。?
yield 關鍵字使生成器函數(shù)暫停執(zhí)行，并返回跟在它后面的表達式的當前值。與return類似，但是可以使用next方法讓生成器函數(shù)繼續(xù)執(zhí)行函數(shù)yield后面內容，直到遇到y(tǒng)ield暫停或return返回或函數(shù)執(zhí)行結束。
二、使用
函數(shù)返回對象包括value和done。其中value值是yield后面表達式值或return后面表達式值。done用于表示函數(shù)運行
function* ge() { ???//聲明時需要添加*，普通函數(shù)內部不能使用yield關鍵字，否則會出錯
??yield?'1';
??yield?'2';
??yield?'3';
??return?'4';
}
?
var a = ge(); ???//調用函數(shù)后不會運行，而是返回指向函數(shù)內部狀態(tài)的指針
a.next(); ???//?{ value:?'1', done:?false?} ??遇到y(tǒng)ield暫停
a.next(); ???//?{ value:?'2', done:?false?}
a.next(); ???//?{ value:?'3', done:?false?}
a.next(); ???//?{ value:?'4', done:?true} ???函數(shù)執(zhí)行完畢，返回done
a.next(); ???//?{ value:?undefined, done:?true} ?已經(jīng)執(zhí)行完畢，返回undefined
如果next沒有帶有參數(shù)true，yield不能返回值，返回undefined；next函數(shù)帶有參數(shù)true，即.next(true)時，那么yield就可以返回表達式的值，用于賦值。如果next帶有其他參數(shù)，那么它就會將當前yield返回值置為該參數(shù)。如：
var?i = yield?1; ??// 將1賦值給i
三、for…of
for…of循環(huán)可以自動遍歷Generator函數(shù)時生成的Iterator對象。
function* ge()?{?
??yield?'1';
??yield?'2';
??yield?'3';
??return?'4';
}for(let?v of ge()){
??alert(V); ???// 1 2 3 4
}
?
四、yield與異步
函數(shù)在遇到y(tǒng)ield后暫停運行，我們可以在需要的地方使用next讓它繼續(xù)運行。并且必要時可以使用next傳入?yún)?shù)。
對于一些可能被多處引用的功能模塊，建議提煉成業(yè)務組件統(tǒng)一管理。這些組件一般有以下特征：
只負責一塊相對獨立，穩(wěn)定的功能；
沒有單獨的路由配置；
可能是純靜態(tài)的，也可能包含自己的 state，但不涉及 dva 的數(shù)據(jù)流，僅受父組件（通常是一個頁面）傳遞的參數(shù)控制。
?
?
model里面包括以下五部分：namespace、state、reducers、effects、subscriptions，缺一不可。注意，這里也需要從service層導入相應的方法。
·?namespace 命名空間
namespace: 'projects'
·?state 相當于原生React中的state狀態(tài)，用于存放數(shù)據(jù)的初始值。
state: {
????projectsData:?[]}
·?reducers 用于存放能夠改變view的action，這里按照官方說明，不應該做數(shù)據(jù)的處理，只是用來return state，從而改變view層的展示。
reducers:?{
????getProjectAllData(state, action) {
????????return { ...state, ...action.payload?};
????},
}
·?effects 用于和后臺交互，是處理異步數(shù)據(jù)邏輯的地方。
effects: {
????*getAllProjects({ payload = {} }, { call, put }) {
????????try?{
????????????const?res = yield?call(projectsService.checkBranches, payload);
????????????yield?put({
????????????????type: 'getProjectData',
????????????????payload: {
????????????????????projectsData: res.data
????????????????}
????????????});
????????} catch?(e) {
????????????message.warning(e.message);
????????}
????},
}
·?subscriptions 訂閱監(jiān)聽，比如監(jiān)聽路由，進入頁面如何如何，就可以在這里處理。相當于原生React中的componentWillMount方法。就比如上述代碼，監(jiān)聽/project路由，進入該路由頁面后，將發(fā)起getAllProjects aciton，獲取頁面數(shù)據(jù)。
subscriptions: {
????setup({ dispatch, history }) {
????????return?history.listen(({ pathname }) => {
????????????if?(pathname === '/projects') {
????????????????dispatch({
????????????????????type: 'getAllProjects'
????????????????});
????????????}
????????});
????}
}
數(shù)據(jù)流向
數(shù)據(jù)的改變發(fā)生通常是通過用戶交互行為或者瀏覽器行為（如路由跳轉等）觸發(fā)的，當此類行為會改變數(shù)據(jù)的時候可以通過 dispatch 發(fā)起一個 action，如果是同步行為會直接通過 Reducers?改變 State ，如果是異步行為（副作用）會先觸發(fā) Effects 然后流向 Reducers?最終改變 State。
?
在react怎樣引入jQuery
安裝jQuery
npm i jquery -S
在那個地方使用jQuery就在什么地方引入jQuery
import $ from ?'jquery'
類似
?
使用Link,先引入Link
import {
????BrowserRouter as Router,
????Route,
????Link
} from 'react-router-dom'
有個很笨的辦法可以出來效果：用menu的點擊事件獲取當前option的key存入state中，顯示內容根據(jù)key值判斷顯示隱藏。方法雖然很笨，但是效果還行！
?
導航欄樣式，好好看
上，模型展示時必須引jquery
?
改layout布局樣式，（我只改了margin）
解決es6兼容ie問題。上述兩行代碼
?
百度：Generator函數(shù)
