React流水賬

1、腳手架的安裝

npm installl -g create-react-app

create-react-app my-app

cd my-app

npm start

2、暴露配置項

用create-react-app建立的專案中，為了避免一開始就費太多精力配置技術棧，webpack等配置都是封裝好的，如果需要修改，可以用如下命令將配置項“彈射”到應用的頂層（eject命令不可逆）。

npm run eject

3、可以使用標籤屬性值傳遞引數，在元件中使用props接收並使用，可以使用props.children來獲取標籤中text；props主要用於元件通訊父元件向子元件傳遞引數，不能改變原有值。

4、state用於改變元件內容狀態的值（動態），只能用於繼承自Component的元件，可以使用setstate來改變內部的值。

5、使用onClick來呼叫點選事件，注意字母的大小寫。

6、render函式中可使用三目運算子來實現if分支。

7、React中儘量使用無狀態的元件（函式），有狀態的元件在執行過程中會執行生命週期函式。

8、生命週期：

8.1、getDefaultProps()

設定預設的props，也可以用dufaultProps設定元件的預設屬性.

8.2、getInitialState()

在使用es6的class語法時是沒有這個鉤子函式的，可以直接在constructor中定義this.state。此時可以訪問this.props

8.3、componentWillMount()

元件初始化時只呼叫，以後元件更新不呼叫，整個生命週期只呼叫一次，此時可以修改state。

8.4、 render()

react最重要的步驟，建立虛擬dom，進行diff演算法，更新dom樹都在此進行。此時就不能更改state了。

8.5、componentDidMount()

元件渲染之後呼叫，只呼叫一次。

更新
8.6、componentWillReceiveProps(nextProps)

元件初始化時不呼叫，元件接受新的props時呼叫。

8.7、shouldComponentUpdate(nextProps, nextState)

react效能優化非常重要的一環。元件接受新的state或者props時呼叫，我們可以設定在此對比前後兩個props和state是否相同，如果相同則返回false阻止更新，因為相同的屬性狀態一定會生成相同的dom樹，這樣就不需要創造新的dom樹和舊的dom樹進行diff演算法對比，節省大量效能，尤其是在dom結構複雜的時候

8.8、componentWillUpdata(nextProps, nextState)

元件初始化時不呼叫，只有在元件將要更新時才呼叫，此時可以修改state

8.9、render()

元件渲染

8.10、componentDidUpdate()

元件初始化時不呼叫，元件更新完成後呼叫，此時可以獲取dom節點。

解除安裝
8.11、componentWillUnmount()

元件將要解除安裝時呼叫，一些事件監聽和定時器需要在此時清除。