React學習2-使用組件構建應用程序

一、propsTypes:propTypes可以顯示的在你的組件中聲明可以使用哪些屬性、哪些屬性是必須的、屬性可以接受的數據類型等。使用propsTypes可以獲得兩個好處:(1)可以很容易的打開一個組件的代碼,查看哪些屬性是必須的,他們的數據類型是什麼。(2)當誤用了組件的時候,React會在控制檯中顯示一個錯誤信息,告訴你哪個屬性有問題或者被誤用了,以及是哪個render方法導致了問題


在上面的代碼中fileName被定爲需要一個字符串類型的數據,如果傳輸的數據類型不是字符串類型的,責會在console中提示錯誤信息。對於可選的屬性,只要不設置.isRequired,React就只有在這個屬性被賦值的情況下才會檢查他的數據類型。

二、可以爲組件提供一個默認值,這樣當屬性未被顯示賦值的時候,將會使用這個默認值。定義一個defaultProps對象作爲一個構造函數屬性。

如果沒有爲組件傳值,那麼該組件就會使用默認值,如果傳值,就是顯示你提供的值,當然這個值必須是字符串類型。

三、propsTypes校驗器: React的PropsTypes包含有一組檢驗期,可用來確保組件接受到的數據是有效的

React.createClass({
  propTypes: {
    // 默認情況下,這些 prop 都是可傳可不傳的。
    React.PropTypes.array,   屬性必須是一個數組
    React.PropTypes.bool,     屬性必須一個布爾值
    React.PropTypes.func,     屬性必須是一個函數
    React.PropTypes.number,  屬性必須是一個數字
    React.PropTypes.object,   屬性必須是一個對象
    React.PropTypes.string,    屬性必須是一個字符串

    // 所有可以被渲染的對象:數字,字符串,DOM 元素或包含這些類型的數組。
    React.PropTypes.node,

    // React 元素
    React.PropTypes.element,

    //屬性必須是指定類的實例
    React.PropTypes.instanceOf(Message),

    // 確保屬性被限制爲一組枚舉值中的一項
    React.PropTypes.oneOf(['News', 'Photos']),

    // 屬性必須是屬於指定的一組數據類型中的一種
    React.PropTypes.oneOfType([
      React.PropTypes.string,
      React.PropTypes.number,
      React.PropTypes.instanceOf(Message)
    ]),

    // 指定類型組成的數組
    React.PropTypes.arrayOf(React.PropTypes.number),

    // 指定類型的屬性構成的對象
    React.PropTypes.objectOf(React.PropTypes.number),

    // 屬性必須是一個符合特定格式的對象,他需要擁有同一組屬性
    optionalObjectWithShape: React.PropTypes.shape({ 
      color: React.PropTypes.string,
      fontSize: React.PropTypes.number
    }),

    // 以後任意類型加上 `isRequired` 來使 prop 不可空。
    React.PropTypes.func.isRequired,

    // 不可空的任意類型
    React.PropTypes.any.isRequired,
四、自定義propTypes:校驗器在本質上就是一個函數。他接受的參數是一組屬性,要檢查屬性的名稱、組件的名稱。函數在校驗的屬性值是有效的時候什麼都不返回,要麼返回一個說明了無效的屬性值Error對象。五、1.props是一個組件的配置信息,他們是從組件的上層傳遞而來,在組件接受熬之後就保持不變。 2.state一開始在組件的構造函數中被設置爲一個默認值,然後隨着組件的執行而不斷地變化(通常是由於用戶的操作而變化)。一個組件
在內部管理他自己的state,每當state變化的時候,組件就會自動的渲染。六、React組件分爲兩種,一類組件內部有state,稱爲有狀態組件,另一種是內部沒有state,只是負責顯示數據稱爲單純組件七、讓一個應用程序的大部分組件都是無狀態的單純組件是一個最佳實踐。如果應用程序的state在多個組件之間傳播,會導致他難以跟蹤,猶豫應用程序的工作方式變得更不清晰,也降低了程序代碼的可預測性。這會在你的代碼中潛在的引入一些難以理清和解決的情況。八、那些組件應當是有狀態的組件:1.標識出基於那個state來進行渲染的每一個組件。2.找到一個通用的owner阿健(在組件的層級中,位於所有需要那個state的組件之上的單個組件)。3.通用的owner組件或者更好層級的另一個組件應當擁有那個state。4.如果你無法找到一個合理的擁有state的組件,創建一個新的組件來擁有state,然後在所有的組件層級中,將他添加到所有需要那個state的組件上的某個位置。九、組件通信:在React中,數據沿着組件的層級,從上層傳遞到下層。在一個有意義的應用程序中,嵌套的子組件需要能與父組件進行通信,實現這種通信的一個方法,就是通過父組件作爲props傳遞而來的回調進行。十、組件的聲明週期:   1.加載(Mounting):constructor》 componentWillMount(被調用一次,在初始渲染之前立即被調用。在這個階段設置state不會觸發重新渲染) 》 render 》 componentDidMount(被調用一次,在初始渲染之後被立即調用,在生命週期這個時間點,組件有了一個可被訪問的DOM內容,這樣對於數據獲取操作而言是很有用的。)   2.卸載(Unmounting):componentWillUnmount(在一個組件被從COM中卸載時被立即調用,當你需要進行一些清理操作,例如移除在加載階段定義的事件偵聽計時器,就可以利用此函數)   3.props更改:componentWillReceiveProps(當一個組件接受到新的props時被調用。在這個函數中調用this.setState()不會觸發一次新的渲染 》 shouldComponentUpdate(shouldComponentUpData是一個特別的函數他會在render函數之前被調用,在這個函數裏面可以定義是否需要進行一次渲染,或者還是說這次渲染可以被跳過。這個函數對於性能優化而言很有用) 》 componentWillUpdate(當接受到新的props或者state而進行渲染之前,此函數被立即調用。在這個函數中不允許通過this.setState()對state進行任何更改,他只能嚴格的用於準備即將開始的渲染,而不能自己再去觸發一次渲染) 》render 》 componentDidUpdate(在組件的更新被刷新到DOM之後,就立即被調用)    4.state更改:shouldComponentUpdate 》 componentWillUpdate 》 render 》 componentDidUpdate(state更改基本上會觸發和props更改相同的那些生命週期函數,只有一個類外,沒有對應於componentWillRecriveProps的函數。一個傳入props的轉換操作可能會導致state的更改,但是反之則不然。如果你需要在state更改時進行操作,使用componentWilUpdate函數)    5.獲取數據:當應用程序需要從遠端獲取數據的時候,應該在一個特定的組件生命週期中獲取數據:componentDidMount生命週期函數    6.容器組件:一個新的有狀態的組件,來專門負責和遠端API通信,並將數據和回調以props的方式傳遞給下層的組件,這樣的組件叫做容器組件十一、在js中,對象和數組都是通過引用的方式進行傳遞的並且數組的非侵入式方法和Object.assign都不會做深度的複製。這就意味着在你通過非侵入式方法和Object.assign所創建的對象中所包含的嵌套對象和數組,仍然指向的事原對象中的嵌套對象和數組。十二、update:這個update函數應用到普通的js對象和數組之上,幫助你將他們包裝成不可變的對象:函數不會真正修改這些對象,而總是返回一個新的可變的對象。update函數接受兩個參數:第一個參數是你想要更新的對象或者數組。第二給參數是一個對象,他描述了你想要在何處進行何種修改
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章