React初學之組件基礎

學習參考 慕課網-react入門
講的比較好

React

1. React並非一個完整的MVC MVVM框架，只是其中的V部分

2. React組件化構建UI的思路值得學習

3. React的特色在於「輕量」,適合複雜場景的高性能開發,組件庫的重用和組件的組合

4. ...

React Components

React組件聲明週期以下

1. Mounted: React.renderComponent() react組件被render解析生成對應DOM節點並插入瀏覽器的DOM結構的一個過程

2. Update: setState()/setProps() => render() react會將組件的當前state和最近state進行對比，若是發生改變影響DOM結構時候，則被從新render的過程

3. Unmounted: 一個mounted的react components對應DOM節點被從DOM結構中移除的一個過程

每一個狀態React都封裝了相應地hook函數

1) Mounting過程:

getDefaultProps() => getInitialState() => componentWillMount() => render() => componentsDidMount()

2) Updating過程:

componentWillReceiveProps() 當mounted component將要接受一個新的props時候觸發 => shouldComponentUpdate() 判斷當前props是否改變 改變則更新=> componentWillUpdate() => render() => componentDidUpdate();

3) Unmounting過程:

componentWillUnmount();

components的state和props的區別？

props在寫組件的時候指定，通常狀況下不會變；
state通常被認爲是私屬於當前組件，能夠改變。

component事件綁定

兩個學習demo
jsx基礎
https://jsfiddle.net/lifesimp...

component事件綁定
https://jsfiddle.net/lifesimp...

注意一點，組件名稱大寫開頭