React入門0x017: 函數組件

0x000 概述

函數組件其實就是一個函數，一個render函數。

0x001 栗子

• 源碼

  import React from 'react'
  import ReactDom from 'react-dom'
  
  function App(props){
      return(<div>
          {props.name}
      </div>)
  }
  
  ReactDom.render(
      <App name='function component'/>,
      document.getElementById('app'))

• 效果

• 更加精簡一點
  借用箭頭函數和參數解構

  let App = ({name}) => <div>{name}</div>

• 注意：

  • 沒有this
  • 沒有生命週期
  • 只有一個參數：props（如果打印參數列表會發現有兩個參數，第二個參數是context，但是context的api已經發生改變，所以，第二個參數應該是遺留下來的，官方文檔中也有說明，函數組件只有一個props參數）

0x003 portal-容器組件

函數組件也可以有children，變成一個portal，或者是容器組件？

• 源碼：

  let App = ({children}) => <div>{children}</div>
  ReactDom.render(
      <App>
         哈哈
      </App>,
      document.getElementById('app'))

• 效果

0x004 用法

函數組件有個好處，那就是簡單，不需要太多的樣板代碼，並且相同的輸入可以得到相同的輸出，是個純函數。

所以可以用來做一些快速的封裝，比如，一個組件的代碼太多，顯得咋亂，又沒有複雜到需要另起一個組件，可以用函數組件:

• 源碼：

  let App = ({children}) => <div>{children}</div>
  let Topbar = () => <div>這是標題欄</div>
  let Navbar = () => <div>這是導航欄</div>
  let Content = ({children}) => <div>{children}</div>
  
  ReactDom.render(
      <App>
          <Topbar/>
          <Content>
              <div>哈哈</div>
          </Content>
          <Navbar/>
      </App>,
      document.getElementById('app'))

• 效果：

總結

沒有多餘的東西，對性能也有所提升哦～