react 組件生命周期

Paste_Image.png

<p>
具體參考這篇文章:
http://www.race604.com/react-native-component-lifecycle/
<p>

render():

render 保持其 pure 特性(純粹的渲染)

  1. 不修改組件state
  2. 不操作dom,瀏覽器交互

按照這樣方式,可以使得服務端渲染可行,react-natve可行

getInitialState()

組件掛載之前調用一次 返回值為this.state的初始值

componentWillMount() 和 componentDidMount()

componentDidMount : 初始化渲染之后調用

通過 this.getDOMNode() 來獲取相應 DOM 節點
可以發送ajax
與其他框架集成

componentWillMount : 初始化渲染之前調用

componentWillReceiveProps

在組件接收到新的 props 的時候調用。在初始化渲染的時候,該方法不會調用。
用此函數可以作為 react 在 prop 傳入之后, render() 渲染之前更新 state 的機會。老的 props 可以通過 this.props 獲取到。在該函數中調用 this.setState() 將不會引起第二次渲染。

提示
Warning: Any use of a keyed object should be wrapped in React.addons.createFragment(object) before being passed as a child

生命周期demo gist:

https://gist.github.com/sherlock221/b1536d37d744912642ff

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 在組件的整個生命周期中,隨著該組件的props或者state發生改變,其DOM表現也會有相應的變化。一個組件就是一...
    張chuner閱讀 330評論 0 2
  • 下面所寫的,只適合前端的React。(React也支持后端渲染,而且和前端有點小區別,不過我沒用過。) 相關函數 ...
    linjinhe閱讀 177,111評論 28 208
  • 相關函數 簡單地說,React Component通過其定義的幾個函數來控制組件在生命周期的各個階段的動作。在ES...
    Allan要做活神仙閱讀 296評論 0 0
  • 人的一生就像一場救贖,給自己找一個出口,讓自己走出去,而不是被囚困。 從哪里開始,到哪里去,怎么去,都要問自己。 ...
    驚鴻入夢閱讀 256評論 0 0
  • 窮人富人 男人女人 商人藝術家 政治家平民 明星吃瓜群眾 互相羨慕 互相折磨 相約升天
    巳廾閱讀 219評論 0 0