React中創建組件的兩種方式及兩種創建組件方式的對比

React中創建組件

第1種 - 創建組件的方式

使用構造函數來創建組件，如果要接收外界傳遞的數據，需要在 構造函數的參數列表中使用props來接收；

必須要向外return一個合法的JSX創建的虛擬DOM；

• 創建組件：

  function Hello () { 
  	// return null 
  	return <div>Hello 組件</div>
  }
  

• 爲組件傳遞數據：

  // 使用組件並 爲組件傳遞 props 數據
     const element = <Hello name={person.name} age={person.age} gender={person.gender}></Hello>
  
  // 在構造函數中，使用 props 形參，接收外界 傳遞過來的數據
  function Hello(props) {
    // props.name = 'zs'
    console.log(props)
    // 結論：不論是 Vue 還是 React，組件中的 props 永遠都是隻讀的；不能被重新賦值；
  
    return <div>這是 Hello 組件 --- {props.name} --- {props.age} --- {props.gender}</div>
  }
  const person={
  name:'張三',
  age:18,
  gender:'男'
  }
  //渲染組件
    ReactDOM.render(
      element,
      document.getElementById('root')
    );
  

1. 父組件向子組件傳遞數據

2. 使用{…obj}屬性擴散傳遞數據

3. 將組件封裝到單獨的文件中

4. 注意：組件的名稱首字母必須是大寫

5. 在導入組件的時候，如何省略組件的.jsx後綴名：

   // 打開 webpack.config.js ，並在導出的配置對象中，新增 如下節點：
   resolve: {
       extensions: ['.js', '.jsx', '.json'], // 表示，這幾個文件的後綴名，可以省略不寫
       alias: {
           '@': path.join(__dirname, './src')
       }
     }
   

6. 在導入組件的時候，配置和使用@路徑符號

第2種 - 創建組件的方式

使用 class 關鍵字來創建組件

ES6 中 class 關鍵字，是實現面向對象編程的新形式；

瞭解ES6中 class 關鍵字的使用

1. class 中 constructor 的基本使用
2. 實例屬性和實例方法
3. 靜態屬性和靜態方法
4. 使用 extends 關鍵字實現繼承

基於class關鍵字創建組件

1. 最基本的組件結構：

   // 如果要使用 class 定義組件，必須 讓自己的組件，繼承自 React.Component
   class 組件名稱 extends React.Component {
       // 在 組件內部，必須有 render 函數,作用：渲染當前組件對應的虛擬DOM結構
       render(){
           // render 函數中，必須 返回合法的 JSX 虛擬DOM結構
           return <div>這是 class 創建的組件</div>
       }
   }
   

2. 兩種創建組件方式的對比

注意：使用 class 關鍵字創建的組件，有自己的私有數據（this.state） 和 生命週期函數；

注意：使用 function 創建的組件，只有props，沒有自己的私有數據和 生命週期函數；

1. 用構造函數創建出來的組件：叫做“無狀態組件”【無狀態組件用的不多】
2. 用class關鍵字創建出來的組件：叫做“有狀態組件”【今後用的最多】
3. 什麼情況下使用有狀態組件？什麼情況下使用無狀態組件？
   • 如果一個組件需要有自己的私有數據，則推薦使用：class創建的有狀態組件；
   • 如果一個組件不需要有私有的數據，則推薦使用：無狀態組件；
   • React官方說：無狀態組件，由於沒有自己的state和生命週期函數，所以運行效率會比 有狀態組件稍微高一些；

有狀態組件和無狀態組件之間的本質區別就是：有無state屬性、和 有無生命週期函數；

4. 組件中的 props 和 state/data 之間的區別

• props 中的數據都是外界傳遞過來的；
• state/data 中的數據，都是組件私有的；（通過 Ajax 獲取回來的數據，一般都是私有數據）；
• props 中的數據都是隻讀的；不能重新賦值；
• state/data 中的數據，都是可讀可寫的；