react簡單用法

1、生命周期

組件的生命周期可分成三個狀態(tài):

Mounting:已插入真實 DOM

Updating:正在被重新渲染

Unmounting:已移出真實 DOM

componentWillMount?在渲染前調(diào)用,在客戶端也在服務(wù)端。

componentDidMount?: 在第一次渲染后調(diào)用,只在客戶端。之后組件已經(jīng)生成了對應(yīng)的DOM結(jié)構(gòu),可以通過this.getDOMNode()來進行訪問。 如果你想和其他JavaScript框架一起使用,可以在這個方法中調(diào)用setTimeout, setInterval或者發(fā)送AJAX請求等操作(防止異部操作阻塞UI)。

componentWillReceiveProps?在組件接收到一個新的 prop (更新后)時被調(diào)用。這個方法在初始化render時不會被調(diào)用。

shouldComponentUpdate?返回一個布爾值。在組件接收到新的props或者state時被調(diào)用。在初始化時或者使用forceUpdate時不被調(diào)用。?

可以在你確認不需要更新組件時使用。

componentWillUpdate在組件接收到新的props或者state但還沒有render時被調(diào)用。在初始化時不會被調(diào)用。

componentDidUpdate?在組件完成更新后立即調(diào)用。在初始化時不會被調(diào)用。

componentWillUnmount在組件從 DOM 中移除的時候立刻被調(diào)用。


2、組件

推薦的組件有兩種,第一個,無狀態(tài)組件是以函數(shù)的形式,第二個,es6形式的extends React.Component定義的組件;


無狀態(tài)組件

無狀態(tài)組件還有以下幾個顯著的特點:

組件不會被實例化,整體渲染性能得到提升

因為組件被精簡成一個render方法的函數(shù)來實現(xiàn)的,由于是無狀態(tài)組件,所以無狀態(tài)組件就不會在有組件實例化的過程,無實例化過程也就不需要分配多余的內(nèi)存,從而性能得到一定的提升。

組件不能訪問this對象

無狀態(tài)組件由于沒有實例化過程,所以無法訪問組件this中的對象,例如:this.ref、this.state等均不能訪問。若想訪問就不能使用這種形式來創(chuàng)建組件

組件無法訪問生命周期的方法

因為無狀態(tài)組件是不需要組件生命周期管理和狀態(tài)管理,所以底層實現(xiàn)這種形式的組件時是不會實現(xiàn)組件的生命周期方法。所以無狀態(tài)組件是不能參與組件的各個生命周期管理的。

無狀態(tài)組件只能訪問輸入的props,同樣的props會得到同樣的渲染結(jié)果,不會有副作用


狀態(tài)組件

React.Component是以ES6的形式來創(chuàng)建react的組件的,是React目前極為推薦的創(chuàng)建有狀態(tài)組件的方式,最終會取代React.createClass形式;相對于?React.createClass可以更好實現(xiàn)代碼復(fù)用


3、組件之間傳參數(shù)

父到子:props

子到父:

父,現(xiàn)定義個預(yù)留函數(shù),主要作用把值賦給state

子,通過取父組件的屬性來把state傳遞給子組件

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • HTML模版 之后出現(xiàn)的React代碼嵌套入模版中。 1. Hello world 這段代碼將一個一級標題插入到指...
    ryanho84閱讀 6,447評論 0 9
  • 說在前面 關(guān)于 react 的總結(jié)過去半年就一直碎碎念著要搞起來,各(wo)種(tai)原(lan)因(le)。心...
    陳嘻嘻啊閱讀 7,035評論 7 41
  • 本筆記基于React官方文檔,當前React版本號為15.4.0。 1. 安裝 1.1 嘗試 開始之前可以先去co...
    Awey閱讀 7,932評論 14 128
  • 原教程內(nèi)容詳見精益 React 學習指南,這只是我在學習過程中的一些閱讀筆記,個人覺得該教程講解深入淺出,比目前大...
    leonaxiong閱讀 2,945評論 1 18
  • 在疲憊中醒來。沒有看見光芒萬丈的朝陽,沒有聞見空氣中浮動的桂花香,沒有感受到秋日涼爽的微風。夢中把我壓得喘...
    蔓草漾閱讀 420評論 0 0

友情鏈接更多精彩內(nèi)容