react之組件類型

BicycleWarrior 發布于2019-08-23 18:36 / 2205人閱讀

摘要：一構造函數組件構造函數組件，可接受外部傳入的參數，生成并返回一個元素偽。二關鍵字組件中組件的書寫方式跟中類的書寫方式非常接近，可以通過進行創建。如上圖，監聽的事件，實時更改的值并展示。

一、構造函數組件
構造函數組件，可接受外部傳入的參數props，生成并返回一個React元素（偽DOM）。
例如，如下，Greeting作為一個組件，接受傳入的參數name,并返回一個內容已填充的p標簽。

function Greeting (props) {
   return (
       {props.name},how are you? 
   )
}

const element = 
ReactDOM.render(
  element,
  document.getElementById("root")
)

二、class關鍵字組件
react中class組件的書寫方式跟es6中類的書寫方式非常接近，可以通過React.Compnent進行創建。與函數組件不同的是，該組件可以進行復雜邏輯的處理，既可以接受外部參數props，也可以擁有自己的state，用于組件內的通信。

class HighGreeting extends React.Component {
   constructor(props){
     super(props);
     this.state={
       inputValue: this.props.name
     } 
     this.handleInputChange = this.handleInputChange.bind(this);
   }
   render () {
     return (
        
        {this.state.inputValue},how are you?
     )
   }
   handleInputChange(e){
      let value = e.target.value;
      this.setState({
         inputValue: value
      })
   }
} 

const element = 
ReactDOM.render(
  element,
  document.getElementById("root")
)

上面的組件，接收props參數作為初始值，當用戶輸入時，會實時更新。

class關鍵字組件內部可以定義state,相當于vue組件內的data,更改時需要調用this.setState,每次調用該方法時，都會執行render方法，自動更新組件。如上圖，監聽input的onchange事件，實時更改inputValue的值并展示。

需要注意的是，props不僅可以傳遞值，還可以傳遞函數。（這一點跟vue不一樣，后面的文章會再細講。）

GPU云服務器云服務器 react _React React 源碼 react cdn

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/105518.html

4、React組件之性能優化

摘要：組件的性能優化高德納我們應該忘記忽略很小的性能優化，可以說的情況下，過早的優化是萬惡之源，而我們應該關心對性能影響最關鍵的另外的代碼。對多個組件的性能優化當一個組件被裝載更新和卸載時，組件的一序列生命周期函數會被調用。 React組件的性能優化高德納: 我們應該忘記忽略很小的性能優化，可以說97%的情況下，過早的優化是萬惡之源，而我們應該關心對性能影響最關鍵的另外3%的代碼。...

陳偉 2019-08-22 15:01 評論0 收藏0
React 源碼漂流（一）之起航

摘要：在前端開發過程中，源碼解讀是必不可少的一個環節，我們直接進入主題，注意當前版本號。注意包文件僅僅是的必要的功能性的定義，它必須要結合一起使用下是，原生環境下是。在前端開發過程中，源碼解讀是必不可少的一個環節，我們直接進入主題，注意當前 React 版本號 16.8.6。注意：react 包文件僅僅是 React components 的必要的、功能性的定義，它必須要結合 React...

Mr_zhang 2019-08-26 10:20 評論0 收藏0
React手稿之類型檢查

摘要：類型檢查是為了確保傳入組件的參數正確性。通常在項目中可以使用或者來實現。示例以上內容在實現一個通用組件時非常有用。類型檢查和參數默認值一起使用，保證組件的正常運行。 Typechecking With PropTypes 類型檢查是為了確保傳入組件的參數正確性。通常在項目中可以使用Flow或者TypeScript來實現。 React提供了PropTypes來檢查類型。示例： imp...

tomorrowwu 2019-08-26 12:24 評論0 收藏0
可靠React組件設計的7個準則之封裝

摘要：組件可以處理其他組件的實例化為了避免破壞封裝，請注意通過傳遞的內容。因此，將狀態管理的父組件實例傳遞給子組件會破壞封裝。讓我們改進兩個組件的結構和屬性，以便恢復封裝。組件的可重用性和可測試性顯著增加。翻譯：劉小夕原文鏈接：https://dmitripavlutin.com/7-... 原文的篇幅非常長，不過內容太過于吸引我，還是忍不住要翻譯出來。此篇文章對編寫可重用和可維護的Re...

yck 2019-08-26 10:40 評論0 收藏0
React 應用設計之道 - curry 化妙用

摘要：右側展現對應產品。我們使用命名為的對象表示過濾條件信息，如下此數據需要在組件中進行維護。因為組件的子組件和都將依賴這項數據狀態。化應用再回到之前的場景，我們設計化函數，進一步可以簡化為對于的偏應用即上面提到的相信大家已經理解了這么做的好處。 showImg(https://segmentfault.com/img/remote/1460000014458612?w=1240&h=663...

sewerganger 2019-08-22 16:27 評論0 收藏0