【全棧React】第11天: 純組件

Cciradih 發布于2019-08-20 18:33 / 1068人閱讀

摘要：今天我們將討論創建組件的最終方案，即無狀態函數的純組件。為了獲得更多的性能和簡單性，同樣允許我們使用正常的函數創建純粹的，無狀態的組件。在中，功能組件被稱為一個參數的類似于構造函數類，它們是它所調用的，以及組件樹的當前。

本文轉載自：眾成翻譯
譯者：iOSDevLog
鏈接：http://www.zcfy.cc/article/3819
原文：https://www.fullstackreact.com/30-days-of-react/day-11/

React提供了幾種創建組件的不同方法。今天我們將討論創建組件的最終方案，即無狀態函數的純組件。

我們已經研究了幾種不同的方法來構建反應組件。通過這一點我們遺漏的一種方法是構建React組件的無狀態組件/功能方法。

正如我們已經看到的那樣，我們只使用React.Component 和React.createClass() 方法構建組件。為了獲得更多的性能和簡單性，React _同樣_允許我們使用正常的JavaScript函數創建純粹的，無狀態的組件。

純組件可以替換只有 render 功能的組件。而不是使一個完整的組件只是將一些內容呈現到屏幕，我們可以創建一個_純_一個代替。

_純_組件是我們可以編寫的最簡單，最快的組件。它們易于編寫，簡單易用，以及我們可以撰寫的最快的組件。在我們深入_為什么_之前，這些更好，讓我們寫一個，或者一對！

// The simplest one
const HelloWorld = () => (Hello world);

// A Notification component
const Notification = (props) => {
  const {level, message} = props;
  const classNames = ["alert", "alert-" + level]
  return (
    
      {message}
    
  )
};

// In ES5
var ListItem = function(props) {
  var handleClick = function(event) {
    props.onClick(event);
  };

  return (
    
      
          {props.children}
      
    
  )
}

所以他們只是功能，對吧？是的！由于它們只是函數，所以使用純JavaScript進行測試非常簡單。這個想法是，如果React知道發送到組件中的 props ，知道是否必須重新投遞，這可能是確定性的。相同的屬性在相同的輸出虛擬DOM中。

在React中，功能組件被稱為一個參數的props （類似于 React.Component 構造函數類），它們是它所調用的 props ，以及組件樹的當前context 。

例如，假設我們想使用功能組件來重寫我們原來的 Timer 組件，因為我們希望給用戶一個動態的方式來設置自己的時鐘風格（24 / 12小時時鐘使用不同的分隔符，也許他們不想顯示秒數等）。

我們可以將我們的時鐘分解成多個組件，我們可以將每個時間段用作單個組件。我們可能像這樣打破他們：

const Hour    = (props) => {
  let {hours} = props;
  if (hours === 0) { hours = 12; }
  if (props.twelveHours) { hours -= 12; }
  return ({hours})
}

const Minute  = ({minutes}) => ({minutes<10 && "0"}{minutes})

const Second  = ({seconds}) => ({seconds<10 && "0"}{seconds})

const Separator = ({separator}) => ({separator || ":"})

const Ampm = ({hours}) => ({hours >= 12 ? "pm" : "am"})

通過這些，我們可以通過他們是完整的React組件（它們是）放置單個組件：

Minute: 
Second:

我們可以重構我們的時鐘組件來接受 format 字符串，并分解這個字符串，只選擇用戶感興趣的組件。有多種方法可以解決這個問題，比如強制邏輯進入Clock 組件_或者_我們可以創建另一個接受格式字符串的無狀態組件。讓我們這樣做（更容易測試）：

const Formatter = (props) => {
  let children = props.format.split("").map((e, idx) => {
    if (e === "h") {
      return 
    } else if (e === "m") {
      return 
    } else if (e === "s") {
      return 
    } else if (e === "p") {
      return 
    } else if (e === " ") {
      return  ;
    } else {
      return 
    }
  });

  return {children};
}

這是一個有點丑陋的key 和 {...props} 的東西。 React為我們提供了一些幫助映射children的屬性，并且通過React.Children 對象來處理每個孩子的唯一key 。

Clock 組件的render() 函數可以大大簡化，這要歸功于Formatter` 組件：

class Clock extends React.Component {
  state = { currentTime: new Date() }
  componentDidMount() {
    this.setState({
      currentTime: new Date()
    }, this.updateTime);
  }
  componentWillUnmount() {
    if (this.timerId) {
      clearTimeout(this.timerId)
    }
  }

  updateTime = e => {
    this.timerId = setTimeout(() => {
      this.setState({
        currentTime: new Date()
      }, this.updateTime);
    })
  }

  render() {
    const { currentTime } = this.state
    const hour = currentTime.getHours();
    const minute = currentTime.getMinutes();
    const second = currentTime.getSeconds();

    return (
      
        
      
    )
  }
}

我們的 Clock 組件不僅更簡單，而且更容易測試。它_也_將幫助我們過渡到使用數據狀態樹，如Flux / Redux框架，但更多的是在以后。

呃...所以為什么要關心？

在React中使用功能組件的優點是：

我們可以擺脫笨重的組件，沒有構造函數，狀態，極度愚蠢的生命周期等。

沒有this關鍵字（即不需要綁定）

演示組件（也稱為啞組件）強調UI超越業務邏輯（即組件中沒有狀態操縱）

鼓勵建立較小的，獨立的組件

強調嚴格的代碼（更好重構）

快速，快速，快速（重要的話要說3遍）

他們是_容易_重用

你可能會說為什么不使用功能組件？那么使用功能組件的一些缺點就會有一些優點：

沒有生命周期回調鉤子函數

功能有限

沒有this 關鍵字

總的來說，喜歡嘗試在其較重的 React.Component 表兄弟中使用功能組件是一個很好的主意。當我們討論React中的數據管理時，我們將看到我們如何使用這些演示組件與數據作為純粹的props。

今天工作得不錯，我們已經成功實現了React等級。我們現在知道制作React組件的_三種_方法。明天，我們將使用React團隊開發的軟件包管理工具，使用/構建React應用程序進行設置： create-react-app。

GPU云服務器云服務器第7天:CSS入門全棧型全棧的全棧和

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

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

【全棧React】React 30天教程索引

摘要：今天我們將討論創建組件的最終方案，即無狀態函數的純組件。今天我們正在研究一種處理提出的復雜數據的方法，稱為體系結構。第天部署介紹今天，我們將探討部署我們的應用所涉及的不同部分，以便外界可以使用我們的應用。本文轉載自：眾成翻譯譯者：iOSDevLog鏈接：http://www.zcfy.cc/article/3758原文：https://www.fullstackreact.com/3...

appetizerio 2019-08-20 18:33 評論0 收藏0
【全棧React】第2天: 什么是 JSX?

摘要：代表基本上是常規。第次更新，在年完成。幾乎完全支持所有主要的瀏覽器。但這將是一段時間，直到較舊版本的瀏覽器逐步停止使用。這意味著將轉換為。在組件的情況下，寫入的將如下所示在我們在第一個作出反應組件使用的語法是語法。本文轉載自：眾成翻譯譯者：iOSDevLog鏈接：http://www.zcfy.cc/article/3797原文：https://www.fullstackreact....

Eirunye 2019-08-20 18:29 評論0 收藏0
【全棧React】第13天: 重復元素

摘要：在我們的應用中添加太多的復雜度來加載外部數據之前今天我們將快速了解如何在應用中重復組件元素。出于性能原因使用虛擬嘗試限制在重新視圖時需要更新的元素的數量。本文轉載自：眾成翻譯譯者：iOSDevLog鏈接：http://www.zcfy.cc/article/3826原文：https://www.fullstackreact.com/30-days-of-react/day-13/ 今...

RaoMeng 2019-08-20 18:33 評論0 收藏0
【全棧React】第18天: Flux 簡介

摘要：在方法中處理數據有三不同的角色派發器儲存視圖層我們的組件的主要思想是有一個單一源儲存他們只能通過觸發更新。這些操作負責調用派發器可以訂閱更改并相應地更新自己的數據。與不同不使用派發器而是使用純函數來定義數據變異函數。本文轉載自：眾成翻譯譯者：iOSDevLog鏈接：http://www.zcfy.cc/article/3812原文：https://www.fullstackreact...

mtunique 2019-08-20 18:35 評論0 收藏0
【全棧React】第30天: 總結和更多的資源

摘要：本文轉載自眾成翻譯譯者鏈接原文我們做到了第天。歡迎來到最后一天恭喜你做到了我們此行的最后一個部分是通過參與。反應社區是活躍成長和友好的。本文轉載自：眾成翻譯譯者：iOSDevLog鏈接：http://www.zcfy.cc/article/3800原文：https://www.fullstackreact.com/30-days-of-react/day-30/ 我們做到了！第30天...

Miracle_lihb 2019-08-21 11:52 評論0 收藏0