1.如果你熟悉 HTML，那麼 JSX 對於你來說是沒有任何壓力的，因為 HTML 中的所有標籤，在 JSX 中都是支援的，基本上沒有學習成本，只有如下幾點略微的不同： class 屬性變為 className tabindex 屬性變為 tabIndex for 屬性變為 htmlFor textarea 的值通過需要通過 value 屬性來指定 style 屬性的值接收一個物件，css 的屬性變為駝峰寫法，如：backgroundColor。 2.需要注意，不管那種方式，元件的名稱首字母必須為大寫。嚴格來說，是 JSX 要求使用者自定義的元件名首字母必須為大寫 3.屬性必須為只讀的，這一點非常重要，請嚴格遵守。對應到上面說到的，如果把元件理解為一個函式，那麼這個函式必須為一個純函式（Pure function），在純函式中不能修改其引數，確定的輸入必須有確定的輸出。 雖然有些時候，你修改了元件的屬性，貌似也能正常工作。沒錯，因為 JavaScript 語言特性的原因，沒人能阻止你這麼做。但是請先相信我，嚴格遵守這條規則不僅能讓你少踩很多坑，而且能讓你的應用穩定性更強、維護性更強。如果你直接修改元件的屬性，React 並不會感知到此修改，從而不會重新渲染元件，就導致了當前元件的檢視展示與資料不一致。 4.React 提供了相應的機制可以設定元件屬性的預設值，如下所示，你需要通過元件的靜態欄位 defaultProps 來設定元件屬性的預設值。如下所示： import React, {Component} from ‘react’; class HelloMessage extends Component { render() { return

; } }HelloMessage.defaultProps = { name: ‘World’ } 這樣就可以了， 這樣不為元件設定任何屬性，那麼它就會在頁面上展示Hello World.。 5.我期望其 name 屬性只能是字串型別的，你要是給我一個 Object，我是沒法正確展示的。為了在開發過程中儘快的發現這類問題，React 為元件添加了型別檢查的機制，你需要給元件設定靜態欄位 propTypes 來設定元件各個屬性的型別檢查器。 import React, {Component} from ‘react’; import PropTypes from ‘prop-types’; class HelloMessage extends Component { render() { return ; } }HelloMessage.defaultProps = { name: ‘World’ }HelloMessage.propTypes = { name: PropTypes.string } 6.下面是 React 提供的可用的資料型別檢查器。 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 所有可以被渲染的資料型別，包括：數值, 字串, 元素或者這些型別的陣列。 PropTypes.instanceOf(Message) 某個類的例項 PropTypes.oneOf([‘News’, ‘Photos’]) 列舉，屬性值必須為其中的某一個值。 PropTypes.oneOfType([PropTypes.string, PropTypes.number]) 型別列舉，屬性必須為其中某一個型別。 PropTypes.arrayOf(PropTypes.number) 屬性為一個數組，且陣列中的元素必須符合指定型別。 PropTypes.objectOf(PropTypes.number) 屬性為一個物件，且物件中的各個欄位的值必須符合指定型別。 PropTypes.any 任何型別 如果你想指定某些屬性為必需屬性，你可以鏈式調動其 isRequired 來標識某個屬性對於當前元件來說是必需的。 7.設定元件的屬性值 屬性的值可以用一對大括號 { } 來包圍，其中可以指定任意的 JavaScript 表示式。如下所示： return ( <User name=“Tom” // 字串 age={18} // 數值 isActivated={true} // 布林值 interests={[‘basketball’, ‘music’]} // 陣列 address={{ city: ‘Beijing’, road: ‘BeiWuHuan’ }} // 物件 /> ) 8.ReactDOM.render 在一個單頁面 web 應用中通常只調用一次。 元件可以通過 setState 改變內部狀態 state 來更新檢視。 setState 多數情況下是非同步的。 不要直接使用當前 state 的值生成下一個 state。 不要直接通過 this.state 修改 state。 9.

擴充套件運算子 擴充套件運算子用三個點號表示，功能是把陣列或類陣列物件展開成一系列用逗號隔開的值

var foo = function(a, b, c) { console.log(a); console.log(b); console.log©; } var arr = [1, 2, 3]; //傳統寫法 foo(arr[0], arr[1], arr[2]); //使用擴充套件運算子foo(…arr);//1 //2 //3

ES6 yield 一、介紹 　　yield 關鍵字用來暫停和繼續一個生成器函式。我們可以在需要的時候控制函式的執行。  　　yield 關鍵字使生成器函式暫停執行，並返回跟在它後面的表示式的當前值。與return類似，但是可以使用next方法讓生成器函式繼續執行函式yield後面內容，直到遇到yield暫停或return返回或函式執行結束。 二、使用 函式返回物件包括value和done。其中value值是yield後面表示式值或return後面表示式值。done用於表示函式執行 function* ge() { //宣告時需要新增*，普通函式內部不能使用yield關鍵字，否則會出錯 yield ‘1’; yield ‘2’; yield ‘3’; return ‘4’; }

var a = ge(); //呼叫函式後不會執行，而是返回指向函式內部狀態的指標 a.next(); // { value: ‘1’, done: false } 遇到yield暫停 a.next(); // { value: ‘2’, done: false } a.next(); // { value: ‘3’, done: false } a.next(); // { value: ‘4’, done: true} 函式執行完畢，返回done a.next(); // { value: undefined, done: true} 已經執行完畢，返回undefined 如果next沒有帶有引數true，yield不能返回值，返回undefined；next函式帶有引數true，即.next(true)時，那麼yield就可以返回表示式的值，用於賦值。如果next帶有其他引數，那麼它就會將當前yield返回值置為該引數。如： var i = yield 1; // 將1賦值給i 三、for…of for…of迴圈可以自動遍歷Generator函式時生成的Iterator物件。 function* ge() { yield ‘1’; yield ‘2’; yield ‘3’; return ‘4’; }for(let v of ge()){ alert(V); // 1 2 3 4 }

四、yield與非同步 函式在遇到yield後暫停執行，我們可以在需要的地方使用next讓它繼續執行。並且必要時可以使用next傳入引數。 對於一些可能被多處引用的功能模組，建議提煉成業務元件統一管理。這些元件一般有以下特徵： 只負責一塊相對獨立，穩定的功能； 沒有單獨的路由配置； 可能是純靜態的，也可能包含自己的 state，但不涉及 dva 的資料流，僅受父元件（通常是一個頁面）傳遞的引數控制。

model裡面包括以下五部分：namespace、state、reducers、effects、subscriptions，缺一不可。注意，這裡也需要從service層匯入相應的方法。 namespace 名稱空間 namespace: ‘projects’ state 相當於原生React中的state狀態，用於存放資料的初始值。 state: { projectsData: []} reducers 用於存放能夠改變view的action，這裡按照官方說明，不應該做資料的處理，只是用來return state，從而改變view層的展示。 reducers: { getProjectAllData(state, action) { return { …state, …action.payload }; }, } effects 用於和後臺互動，是處理非同步資料邏輯的地方。 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 訂閱監聽，比如監聽路由，進入頁面如何如何，就可以在這裡處理。相當於原生React中的componentWillMount方法。就比如上述程式碼，監聽/project路由，進入該路由頁面後，將發起getAllProjects aciton，獲取頁面資料。 subscriptions: { setup({ dispatch, history }) { return history.listen(({ pathname }) => { if (pathname === ‘/projects’) { dispatch({ type: ‘getAllProjects’ }); } }); } } 資料流向 資料的改變發生通常是通過使用者互動行為或者瀏覽器行為（如路由跳轉等）觸發的，當此類行為會改變資料的時候可以通過 dispatch 發起一個 action，如果是同步行為會直接通過 Reducers 改變 State ，如果是非同步行為（副作用）會先觸發 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中，顯示內容根據key值判斷顯示隱藏。方法雖然很笨，但是效果還行！

導航欄樣式，好好看

上，模型展示時必須引jquery

改layout佈局樣式，（我只改了margin）

解決es6相容ie問題。上述兩行程式碼

百度：Generator函式