react知識結構

react.js組件化

建立好擁有各自 state(狀態) 的組件，再將其組合構成更加複雜的UI界面。

組件的劃分

1. 容器組件：容器型組件是一個頁面容器，用來放置當前頁面的全部展現型組件和業務組件組合成一個頁面，經過數據的驅動進行控制展現組件和業務組件
2. 展現組件：展現型組件是具體到某一個小的組件模塊，好比一個按鈕，一個卡片，一個進度條等，咱們在用react作組件化開發的時候，先定義好一個個小的展現型組件，而後把這些組件都導入容器型組件，最終組合成一個完整的頁面。
3. 業務組件：頁面中某個業務模塊的拆分，涉及到數據交互，有本身獨立的業務邏輯

組件的建立

函數組件：函數組件也稱爲無狀態組件，使用純函數建立，建立後不會產生組件實例，也就是說沒法使用ref獲取，主要用於展現組件的開發，性能高，沒有生命週期，沒有state，可是能夠接收props，至關於一個只有render生命週期的組件

function Component (props) {
    return <div>{props.children}</div>
}
//使用
<Component>組件</Component>

class類組件：使用es6 class的方式建立，經過繼承React.component實現，能夠有本身獨立的生命週期，state狀態，必須有render生命週期，state定義在constructor構造函數中,所用的容器組件都是經過class建立

class Component extends React.component {
   constructor (props) {
     super(props)
     this.state = {
         age: 100
     }
   }
   render () {
       const {age} = this.state
       return <div>{age}</div>
   }
}
//使用
<Component />

createClass組件：不經常使用

在react中最小的單位是元素，元素分爲dom元素，組件元素，區分方法是dom元素小寫，組件元素首字母大寫

react組件的狀態

在react中組件的狀態使用state定義，使用setState修改，使用this.state讀取
setState執行原理：setState方法經過一個隊列機制實現state更新，當執行setState的時候，會將須要更新的state合併以後放入狀態隊列，而不會當即更新this.state(能夠和瀏覽器的事件隊列類比)。

componentDidMount() {
    SynapseAnalytics.init({ type:Enum.pageTypeEnum.otherPage });
    this.setState({
        val:this.state.val + 1
    });
    //第一次輸出  0
    console.log(this.state.val);
    this.setState({
        val:this.state.val + 1
    });
    //第二次輸出 0
    console.log(this.state.val);
    setTimeout(()=>{
        this.setState({val:this.state.val + 1});
        //第三次輸出 2
        console.log(this.state.val);
        this.setState({
            val:this.state.val + 1
        });
        //第四次輸出 3
        console.log(this.state.val);
    }, 0);
}

在componentWillUpdate、render、componentDidUpdate生命週期中不能夠調用setState。由於會形成循環調用，使得瀏覽器內存佔滿後崩潰

調用setState後發生了什麼？
setState合併機制

setState更新機制

react

react如何操做dom
使用ref能夠獲取dom
使用react-dom，react-dom是react提供專門用於操做dom的模塊，主要就是findDOMNode, render
事件處理函數中的event對象的target屬性
在函數組件不能使用findDOMNode獲取組件對應的根節點
在函數組件內部使用ref獲取dom，可是ref不能做用在函數組件上獲取組件實例