學(xué)習(xí)參考 慕課網(wǎng)-react入門
講的比較好

React

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

React組件化構(gòu)建UI的思路值得學(xué)習(xí)

React的特點(diǎn)在于“輕量”,適合復(fù)雜場(chǎng)景的高性能開(kāi)發(fā),組件庫(kù)的重用和組件的組合

...

React Components

React組件聲明周期如下

Mounted: React.renderComponent() react組件被render解析生成對(duì)應(yīng)DOM節(jié)點(diǎn)并插入瀏覽器的DOM結(jié)構(gòu)的一個(gè)過(guò)程

Update: setState()/setProps() => render() react會(huì)將組件的當(dāng)前state和最近state進(jìn)行對(duì)比，如果發(fā)生改變影響DOM結(jié)構(gòu)時(shí)候，則被重新render的過(guò)程

Unmounted: 一個(gè)mounted的react components對(duì)應(yīng)DOM節(jié)點(diǎn)被從DOM結(jié)構(gòu)中移除的一個(gè)過(guò)程

每個(gè)狀態(tài)React都封裝了相應(yīng)地hook函數(shù)

1) Mounting過(guò)程:

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

2) Updating過(guò)程:

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

3) Unmounting過(guò)程:

componentWillUnmount();

components的state和props的區(qū)別？

props在寫組件的時(shí)候指定，一般情況下不會(huì)變；
state一般被認(rèn)為是私屬于當(dāng)前組件，可以改變。

component事件綁定

兩個(gè)學(xué)習(xí)demo
jsx基礎(chǔ)
https://jsfiddle.net/lifesimp...

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

注意一點(diǎn)，組件名稱大寫開(kāi)頭

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。