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

Cciradih 發(fā)布于2019-08-20 18:33 / 1090人閱讀

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

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

React提供了幾種創(chuàng)建組件的不同方法。今天我們將討論創(chuàng)建組件的最終方案，即無狀態(tài)函數(shù)的純組件。

我們已經(jīng)研究了幾種不同的方法來構(gòu)建反應(yīng)組件。通過這一點(diǎn)我們遺漏的一種方法是構(gòu)建React組件的無狀態(tài)組件/功能方法。

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

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

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

// 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}
      
    
  )
}

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

在React中，功能組件被稱為一個參數(shù) 的props （類似于 React.Component 構(gòu)造函數(shù)類），它們是它所調(diào)用的 props ，以及組件樹的當(dāng)前context 。

例如，假設(shè)我們想使用功能組件來重寫我們原來的 Timer 組件，因?yàn)槲覀兿Ｍo用戶一個動態(tài)的方式來設(shè)置自己的時鐘風(fēng)格（24 / 12小時時鐘使用不同的分隔符，也許他們不想顯示秒數(shù)等）。

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

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:

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

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};
}

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

Clock 組件的render() 函數(shù)可以大大簡化，這要?dú)w功于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 組件不僅更簡單，而且更容易測試。它_也_將幫助我們過渡到使用數(shù)據(jù)狀態(tài)樹，如Flux / Redux框架，但更多的是在以后。

呃...所以為什么要關(guān)心？

在React中使用功能組件的優(yōu)點(diǎn)是：

我們可以擺脫笨重的組件，沒有構(gòu)造函數(shù)，狀態(tài)，極度愚蠢的生命周期等。

沒有this關(guān)鍵字（即不需要綁定）

演示組件（也稱為啞組件）強(qiáng)調(diào)UI超越業(yè)務(wù)邏輯（即組件中沒有狀態(tài)操縱）

鼓勵建立較小的，獨(dú)立的組件

強(qiáng)調(diào)嚴(yán)格的代碼（更好重構(gòu)）

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

他們是_容易_重用

你可能會說為什么不使用功能組件？那么使用功能組件的一些缺點(diǎn)就會有一些優(yōu)點(diǎn)：

沒有生命周期回調(diào)鉤子函數(shù)

功能有限

沒有this 關(guān)鍵字

總的來說，喜歡嘗試在其較重的 React.Component 表兄弟中使用功能組件是一個很好的主意。當(dāng)我們討論React中的數(shù)據(jù)管理時，我們將看到我們?nèi)绾问褂眠@些演示組件與數(shù)據(jù)作為純粹的props。

今天工作得不錯，我們已經(jīng)成功實(shí)現(xiàn)了React等級。我們現(xiàn)在知道制作React組件的_三種_方法。明天，我們將使用React團(tuán)隊(duì)開發(fā)的軟件包管理工具，使用/構(gòu)建React應(yīng)用程序進(jìn)行設(shè)置： create-react-app。

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/84687.html

發(fā)表評論

登陸后可評論

0條評論

Cciradih

男|高級講師

我要關(guān)注我要私信

TA的文章

IBM推出新款量子芯片，預(yù)計兩年內(nèi)擊敗傳統(tǒng)計算機(jī)

閱讀 2630·2021-11-17 09:33
Linphone和MicroSIP軟電話中暴露嚴(yán)重安全漏洞可致黑客遠(yuǎn)程攻擊

閱讀 4015·2021-10-19 11:46
【物聯(lián)網(wǎng)】12.物聯(lián)網(wǎng)服務(wù)器發(fā)送方式（HTTP，WebSocket ，MQTT ）

閱讀 945·2021-10-14 09:42
如何訪問云主機(jī)數(shù)據(jù)庫-云主機(jī)跟云數(shù)據(jù)庫的區(qū)別？

閱讀 2291·2021-09-22 15:41
云主機(jī)怎么安裝軟件-如何選擇云主機(jī)部署管理軟件？

閱讀 4288·2021-09-22 15:20
4個實(shí)時查看臺風(fēng)路徑的網(wǎng)站平臺（知曉臺風(fēng)最新消息必備工具）

閱讀 4683·2021-09-07 10:22
??身為在軟件測試摸爬滾打多年工程師的感悟，寫給正在迷茫的你??

閱讀 2346·2021-09-04 16:40
React事件

閱讀 842·2019-08-30 15:52

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

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

相關(guān)文章

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

**【全棧React】第2天: 什么是 JSX?**

**【全棧React】第13天: 重復(fù)元素**

**【全棧React】第18天: Flux 簡介**

**【全棧React】第30天: 總結(jié)和更多的資源**

發(fā)表評論

0條評論

Cciradih

男|高級講師

TA的文章

IBM推出新款量子芯片，預(yù)計兩年內(nèi)擊敗傳統(tǒng)計算機(jī)

Linphone和MicroSIP軟電話中暴露嚴(yán)重安全漏洞可致黑客遠(yuǎn)程攻擊

【物聯(lián)網(wǎng)】12.物聯(lián)網(wǎng)服務(wù)器發(fā)送方式（HTTP，WebSocket ，MQTT ）

如何訪問云主機(jī)數(shù)據(jù)庫-云主機(jī)跟云數(shù)據(jù)庫的區(qū)別？

云主機(jī)怎么安裝軟件-如何選擇云主機(jī)部署管理軟件？

4個實(shí)時查看臺風(fēng)路徑的網(wǎng)站平臺（知曉臺風(fēng)最新消息必備工具）

??身為在軟件測試摸爬滾打多年工程師的感悟，寫給正在迷茫的你??

React事件

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

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

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！