玩轉 React 【第03期】：邂逅 React 組件

Lin_R 發布于2019-08-23 12:55 / 2584人閱讀

摘要：中組件可以將切分成一些的獨立的可復用的部件。組件的返回值是一個需要在也頁面上顯示的元素，也就是說中組件必須有返回值。

上期回顧

前文我們講解了 React 模板 JSX，接著我們繼續來看看 React 組件又是如何工作的呢？

組件化開發到了今天已經是大家的共識，在 React 中，組件同樣也是組成我們整個項目的基本單元。

react 中組件可以將UI切分成一些的獨立的、可復用的部件。組件的返回值是一個需要在也頁面上顯示的 React 元素，也就是說 React 中組件必須有返回值。示例如下：

function Hello (props){
    return (
        Hello world
    
整個 Hello 就是一個組件，調用的時候，我們 可以直接 調用  就可以，另外這里要注意，組件的命名必須是首字母大寫。
創建組件
在 React 中創建組件有三種方式：
1） 無狀態的函數式組件； 
2） 基于ES5 的 React.createClass; 
3） 基于 ES6 的 extends React.Component；
這三種方式都可以去創建一個 React 組件，但是在實際的使用過程中有什么不同呢？我們具體來看。
函數式組件
函數式組件，是為了創建純粹的展示組件，也就是說函數式組件一旦創建了就不能修改，除非它的父級修改了才會引起它的修改，這樣的好處就是性能較高，內部沒有太多的東西，如 state 和 聲明周期，當然生命周期和state是什么我們后邊再詳細說，這里我們先大概了解，這倆東西主要是用來更改組件的內容，以及組件修改后的一系列處理的。
函數式組件的編寫方式如下：
function Hello (props[,context]){
    return (
        Hello {props.name}
    , node)
return 中就是我們要顯示在頁面上的內容，props 是父組件傳入的信息，context 是父祖中傳入的信息，關于這兩項的具體內容我們也放在下篇內容中詳細的講解。
除了上述內容之外，函數式組件還有以下幾個特征：
1 組件不會被實例化，而是直接解析成 reactElemnt，整體渲染性能得到提升
2 沒有實例化，自然在組件內部我們也不能使用 this
3 組件無法訪問生命周期的方法，這個我們已經介紹過
4 組件沒有state，只能訪問 props
函數式組件由于其優良的性能，個人建議如果一個組件的內部我們不需要控制它進行改變的話，盡量還是使用 函數式組件
React.createClass
React.createClass 是一種基于 ES5 的創建組件的方式。本質就是一個工廠，在 React.createClass(配置對象) 放入我們的配置對象，然后它會幫我們返回一個 React 組件，
示例如下：
let Fn = React.createClass({
    render: function(){
        return (
            
                Hello React!
                Hello React!
                class屬性
                style屬性
            
        );
    }
});
上述是 React.createClass 的使用方式，但是要注意 React.createClass 方法 在React 16 之后就已經取消了，所以我們就不再討論這個方法，直接來看 ES6 的寫法。
React.Component
React ES6中，如果要聲明一個類式組件，我們需要從 React.Component 繼承過來，具體寫法如下：
class Hello extends React.Component {
    render(){
        return (
            hello! {this.props.name}                
        );
    }
}
ReactDOM.render(
    
    document.querySelector("#app")
);
在使用 React.Component 的時候，有一些問題是需要我們注意的：

在 React.Component 中我們必須要定義一個 render 方法，這個方法中的返回值，就是最終我們要渲染到頁面中 ReactElement 。
組件在實際調用的時候，會生成一個實例化對象，所以組件的方法中的 this 就指向這個實例化對象。
props 這個屬性中存儲的是我們調用時傳入的屬性，也是默認的第0個參數，所以組件中如果定義了 constructor， 必須 使用 super 繼承，另外必須 把第 0 個參數傳入去，示例如下：
最后強調一下，組件的命名必須首字母大寫。

class Hello extends React.Component {
      constructor(props){
          super(props);
      }
      render(){
          return (
              hello! {this.props.name}                
          );
      }
  }

關于組件的創建我們就先介紹到這，在下一篇中，我們會詳細的講解 props,state 以及組件其他的相關知識。
——以上是筆者歸納總結，如有誤之處，歡迎指出。
訂閱號ID：Miaovclass
關注妙味訂閱號：“妙味前端”，為您帶來優質前端技術干貨；           
               
                                           
                       
                 
            
                     
                 
                                                                                                                    
                         GPU云服務器
                                             
                         云服務器
                                                                                                                                                 
                                      
                     
                    
                                                                                               react
                                                                                                           _React
                                                                                                           React 源碼
                                                                                                           react cdn
                                                         
                 
               
              
             
               
                    文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
                 
                   轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/99091.html
               
                      
               
                 
                                  上一篇：如何創建并發布一個 vue 組件  
                                                
                                       下一篇：React 源碼深度解讀（八）：事務 - Part 2

玩轉 React【第02期】：戀上 React 模板 JSX

摘要：今天我們來看一種優雅的編寫的代碼的一種方式。有了之后，可以幫助我們在編寫模板的時候結構更加簡單清晰。以上是筆者歸納總結，如有誤之處，歡迎指出。 showImg(https://segmentfault.com/img/bVbiT3u?w=900&h=383);往期回顧前文中我們講解了利用 ReactElement 來編寫React程序,但是我們也看到這種方式編寫 React 特別的麻...

ivydom 2019-08-23 12:37 評論0 收藏0
FCC 成都社區·前端周刊第 6 期

摘要：詳情發布新版本中可以自動修復和合并沖突的文件，還新增了命令。詳情是一個用構建設計系統的開源工具，提供了一套基礎應用程序開發的工具，模式和實踐。目前，只有和的最新版本支持該屬性。詳情每周一同步更新到歡迎 01. JS 引擎 V8 v6.6 的更新最新 v6.6 版本的 V8 JavaScript 引擎更新了方法 Function.prototype.toString()，改進了代碼緩存...

Airy 2019-08-30 14:21 評論0 收藏0
FCC 成都社區·前端周刊第 6 期

摘要：詳情發布新版本中可以自動修復和合并沖突的文件，還新增了命令。詳情是一個用構建設計系統的開源工具，提供了一套基礎應用程序開發的工具，模式和實踐。目前，只有和的最新版本支持該屬性。詳情每周一同步更新到歡迎 01. JS 引擎 V8 v6.6 的更新最新 v6.6 版本的 V8 JavaScript 引擎更新了方法 Function.prototype.toString()，改進了代碼緩存...

Jiavan 2019-08-22 15:57 評論0 收藏0
FCC 成都社區·前端周刊第 6 期

摘要：詳情發布新版本中可以自動修復和合并沖突的文件，還新增了命令。詳情是一個用構建設計系統的開源工具，提供了一套基礎應用程序開發的工具，模式和實踐。目前，只有和的最新版本支持該屬性。詳情每周一同步更新到歡迎 01. JS 引擎 V8 v6.6 的更新最新 v6.6 版本的 V8 JavaScript 引擎更新了方法 Function.prototype.toString()，改進了代碼緩存...

honhon 2019-08-02 10:06 評論0 收藏0
即將立秋的《課多周刊》(第2期)

摘要：即將立秋的課多周刊第期我們的微信公眾號，更多精彩內容皆在微信公眾號，歡迎關注。若有幫助，請把課多周刊推薦給你的朋友，你的支持是我們最大的動力。課多周刊機器人運營中心是如何玩轉起來的分享課多周刊是如何運營并堅持下來的。即將立秋的《課多周刊》(第2期) 我們的微信公眾號：fed-talk，更多精彩內容皆在微信公眾號，歡迎關注。若有幫助，請把課多周刊推薦給你的朋友，你的支持是我們最大...

MRZYD 2019-08-20 10:14 評論0 收藏0