《React與Redux開發實例精解》讀書筆記

第五章 JSX語法

• class屬性改成className for屬性改成htmlFor
• jsx中javascript表達式必需要有返回值，使用三元操做符
• 全部的標籤必須閉合 input img等
• react聲明組件時，組件名稱第一個字母必須大寫
• 解析html代碼 dangerouslySetInnerHTML={{ __html:htmlString }}
• jsx中內聯樣式經過style屬性來定義，駝峯命名法

第六章 React的數據載體：state props與context

state稱爲內部狀態或局部狀態,
props與context則用於在組件間傳遞數據，props僅支持逐層傳遞，而context則可以跨級傳遞，只要在一個組件中定義了context，這個組件裏面的子組件無論跨多少級均可以訪問到context中的數據，react-redux的provider組件就使用了context來傳遞store

第七章 reactElement與組件實例

組件是一個函數或類，它決定了如何把數據變爲視圖
ReactElement只是一個普通的對象，它描述了組件實例或DOM節點
組件實例是組件類的實例化對象

生命週期

1. constructor()
   執行時間：組件被加載前最早調用，而且僅調用一次
   做用：定義狀態機變量
   注意：第一個語句必須是super（props）

2. componentWillMount()
   執行時間：組件初始渲染（render()被調用前）前調用，而且僅調用一次
   做用：若是在這個函數中調用setState改變某些狀態機，react會等待setState完成後再渲染 組件
   注意：子組件也有componentWillMount函數，在父組件的該函數調用後再被調用

3. render()
   執行時間：componentWillMount以後，componentDidMount以前，
   做用：渲染掛載組件
   觸發條件：（1）初始化加載頁面（2）狀態機改變setState ( 3 ) 接收到新的props（父組件更新）
   注意：組件所必不可少的核心函數；不能在該函數中修改狀態機state

4. componentDidMount()
   執行時間：render以後被調用，而且僅調用一次
   做用：渲染掛載組件；可使用refs（備註：React支持一個特殊的屬性，你能夠將這個屬性加在任何經過render()返回的組件中。這也就是說對render()返回的組件進行一個標記，能夠方便的定位的這個組件實例。）
   注意：子組件也有該函數，在父組件的該函數調用前被調用；若是在該函數中修改某些狀態機state，會從新渲染render組件，因此有些組件爲減小渲染次數，能夠將某些修改狀態機的操做放在componentWillMount函數中；
   若是須要在程序啓動顯示初始化頁面後從網路獲取數據，能夠將網絡請求代碼放在該函數中
   
5. componentWillReceiveProps(nextProps)
   執行時間：組件渲染後，當組件接收到新的props時被調用；這個函數接收一個object參數（新的props）；props是父組件傳遞給子組件的。父組件發生render的時候子組件就會調用
   做用：渲染掛載組件；可使用refs（備註：React支持一個特殊的屬性，你能夠將這個屬性加在任何經過render()返回的組件中。這也就是說對render()返回的組件進行一個標記，能夠方便的定位的這個組件實例。）
   注意：react初次渲染時，該函數並不會被觸發，所以有時該函數須要和componentWillMount或componentDidMount組合使用;使用該函數必定要加nextProps參數
   
6. shouldComponentUpdate(nextProps, nextState)
   執行時間：組件掛載後（即執行完render），接收到新的state或props時被調用，即每次執行setState都會執行該函數，來判斷是否從新render組件，默認返回true；接收兩個參數：第一個是心的props，第二個是新的state。
   做用：若是有些變化不須要從新render組件，能夠在該函數中阻攔
   注意：該方法在初始化渲染的時候不會調用，在使用 forceUpdate 方法的時候也不會
   
7. componentWillUpdate()
   執行時間：在接收到新的props 或者 state，從新渲染以前馬上調用，在初始化渲染的時候該方法不會被調用
   做用：爲即將發生的從新渲染作一些準備工做
   注意：不能再該函數中經過this.setstate再次改變狀態機，若是須要，則在componentWillReceiveProps函數中改變
   
8. componentDidUpdate()
   執行時間：從新渲染後調用，在初始化渲染的時候該方法不會被調用
   做用：使用該方法能夠在組件更新以後操做DOM 元素
   

9. componentWillUnmount()
   執行時間：組件被卸載前調用，
   做用：在該方法中執行任何須要的清理，好比無效的定時器，或者清除在 componentDidMount 中建立的 DOM 元素。

React組件中this

• constructor(),render(),componentDidMount(),componentDidUpdate()等其餘生命週期函數中的this都是組件實例
• 其餘地方的this都與當前上下文有關，所以在render輸出的reactElemnt中調用其餘自定義函數須要綁定this,固然也可使用箭頭函數

第八章 初識Redux

action是一個普通對象，表示將要執行的動做，例如{type:'increment'}
reducer描述了action如何把state轉變成下一個state
store是個全局對象，將action和reducer以及stte聯繫在一塊兒
store有如下職能：

• 維持應用的state
• 提供getState()方法獲取state
• 提供dispatch(action)方法更新state
• 提供subscribe(listener)註冊監聽器

第九章 action建立函數與ReduxThunk中間件

reduxThunk中間件可讓action建立函數先不返回action對象，而是返回一個函數，經過這個函數延遲dispatch或者只在知足指定條件的狀況下dispatch

import {createStore,applyMiddleware} from 'redux';
import thunk from 'redux-thunk';

const store = createStore(counter,applyMiddleware(thunk));

第十一章 使用react-redux連接

在全部組件的頂層使用Provider組件給整個程序提供store

ReactDOM.render(
    <Provider store={store}>
    ...
    </Peovider>,rootEl);

使用connect()將state和action建立函數綁定到組件中

export default connect(
    state=>({counter:state.counter}),//將state.counter傳遞給組件的counter屬性
    ActionCreators//是全部action建立函數的集合，同時爲每一個action建立函數隱式綁定了dispatch方法，
    //所以能夠直接經過props調用這個action建立函數
)(Counter);

容器組件（Container）和展現組件（Components）

	展現組件	容器組件
做用	描述如何展示（骨架、樣式）	描述如何運行（數據獲取、狀態更新）
直接使用 Redux	否	是
數據來源	props	監聽 Redux state
數據修改	從 props 調用回調函數	向 Redux 派發 actions
調用方式	手動	一般由 React Redux 生成