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

React

React并不是一個完整的MVC MVVM框架，只是其中的V部分

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

React的特點在于“輕量”,適合復雜場景的高性能開發,組件庫的重用和組件的組合

...

React Components

React組件聲明周期如下

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

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

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...

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

總結

以上是生活随笔為你收集整理的React初学之组件基础的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。