學習一門語言，貌似最基礎的demo練習就是實現CRUD操作。所以決定做一個react入門總結。 首先，在實現crud操作前我們需要了解，React是如何操作修改資料，先看一個簡單的demon，react是如何實現資料雙向繫結（我理解的資料雙向繫結） 一、簡單的雙向繫結
這裡面有幾點需要注意的： 1. constructor：如果在react中需要新增state預設值，或者繫結事件，需要寫在constructor方法中。 2. super(props)：在這裡呼叫super是因為在ES6中，子類的constructor中必須先呼叫super才能引用this，使用super(props)的目的是在constructor中可以使用this.props，因為我們這裡Main雖然是一個子元件，但是卻沒有傳引數給它所以不需要使用this.props調取父標籤傳遞的引數，所以super(props)可以去掉。在什麼樣的情況一定需要： 比如外標籤是<Main name='testName'></Main>，那麼在Main元件中的constructor中就可以通過this.props.name來獲取。 3. 元件建立：react建立元件有三種方法，分別是：     1>. 無狀態元件：定義方式就是通過 function XXX(){} ，無狀態元件的特點是建立速度快，不需要例項化效能損耗少，但是在無狀態元件中不能使用生命週期。     2>. ES5方式定義元件：定義方式通過 React.createClass，特點是元件具有生命週期，建立元件需要例項化，因此會有相應的效能損耗，相比較ES6定義方式在mounting階段多了兩個鉤子函式 getDefaultProps()  getInitialState() 分別用於定義props,state，位於componentWillMount階段前發生。     3>. ES6方式定義元件：定義方式通過extends React.Component，特點與ES5建立方式類似不同是沒有getDefaultProps()  getInitialState() 這兩個鉤子函式，可以通過setSate直接賦值。 4. this指向：我們在render中呼叫方法的時候需要通過bind繫結this的指向，因為在component中this指向的是globle。 5. setState：在react中state中的值不支援直接賦值，必須通過setState的形式提交修改，setState是非同步的。 二、實現Retrieve（查詢）操作  

這一部分定義，呼叫了幾個方法： changeValue：用於改變input框輸入值時觸發呼叫，通過event.target.value獲取當前輸入值，通過setState修改value值 queryData：用於點選查詢後調取後臺介面，呼叫時繫結this指向，通過this.state.value獲取value呼叫非同步方法向後臺請求（注：getList是封裝後的axio資料請求） componentDidMount：react生命週期，Mounting階段在render渲染前呼叫，因為這裡的的<Table></Table>是一個表格元件，我期望在頁面重新整理的同時加載出表格初始資料，因此需要在dom渲染前完成呼叫。 （注意：react是JSX語法規則，元件建立時會出現class欄位，所以在標籤使用中它用className代替html中的class屬性） （注：因為react是JSX語法規則，所以如果要實現類似vue中的v-for指令需要結合陣列map方法，如下：
react在列表迴圈過程中必須有特殊屬性key，且唯一） 三、React生命週期        react生命週期（元件從建立到消失的整個過程）分為三個階段  mounting（例項化期）     updating（存在期）    unmounting（銷燬期） 1.  例項化階段（mounting） mounting階段就是component被render解析生成對應的DOM節點，並被插入瀏覽器的DOM結構的一個過程（元件從無到有的過程）。 (注：getDefaultProps()，getDefaultState()是react ES5版本的，在reactES6版本中已經被廢棄，不建議使用，是用於初始化定義state，props的預設值) 1>. componentWillMount 該方法在首次渲染（呼叫render方法）之前呼叫，在這一階段元件還未開始例項化，類似於vue生命週期中的created 專案應用：用於做一些元件初始化前需要呼叫的資料處理，也可以在這一階段觸發loading事件。 2>. componentDidMount 這個方法在首次渲染（呼叫render方法）之後呼叫，在這一階段元件已經例項化完成，類似於vue生命週期中的mounted 應用：dom載入完成後，發起axios請求，拿回資料，結束loading事件。 2.  存在期（updating） 一個mounted的React Components被重新render的過程 （只有state,props確實被改變了react才會改變對應的Dom結構，這句話） 1>. componentWillReceiveProps 當一個mounted要接收新的props時會被呼叫,函式引數就是將要接收的props，應用例如，子元件表格從父元件獲取props，並在每次props更新後隨之更新表格資料。 2>. shouldComponentUpdate 是否有必要跟新dom結構，引數是新的props物件，和新的state物件，分別對比this.props和this.state返回true為跟新，返回false為不更新 3>. componentWillUpdate 如果shouldComponentUpdate返回為true則呼叫，元件更新前呼叫，首次render不呼叫 4>. componentDidUpdate componentWillUpdate之後執行，元件重新render後呼叫，首次render不呼叫 3. 銷燬期（unmounted） 一個mounted的React Components對應的DOM節點被從Dom節點移除的過程 componentWillUnmount component銷燬階段，類似於vue中的destroyed 應用：釋放記憶體資源的過程