30天入坑React ---------------day11 Pure Components
這篇文章是系列的一部分 。
在本系列中，我們將從非常基礎開始，逐步瞭解您需要了解的所有內容，以便開始使用React。如果您曾經想學習React，那麼這裡就是您的最佳選擇！
純元件
React提供了幾種建立元件的方法。今天我們將討論建立元件的最終方法，即無狀態純元件的功能。
我們已經研究了構建反應元件的幾種不同方法。我們在這一點上遺漏的一種方法是構建React元件的無狀態元件/功能方法。
正如我們已經看到的那樣，我們只使用React.Component和React.createClass()方法構建元件。為了獲得更高的效能和簡單性，React 還允許我們使用普通的JavaScript函式建立純粹的無狀態元件。
一個純粹的元件可以替換隻有一個元件render的功能。我們可以建立一個純粹的內容，而不是製作一個完整的元件只是為了將一些內容渲染到螢幕上。
純元件是我們可以編寫的最簡單，最快速的元件。它們易於編寫，易於推理，而且我們可以編寫最快的元件。在我們深入瞭解為什麼這些更好之前，讓我們寫一個，或者說幾個！
// The simplest one const HelloWorld = () => (<div>Hello world</div>); // A Notification component const Notification = (props) => { const {level, message} = props; const classNames = ['alert', 'alert-' + level] return ( <div className={classNames}> {message} </div> ) }; // In ES5 var ListItem = function(props) { var handleClick = function(event) { props.onClick(event); }; return ( <div className="list"> <a href="#" onClick={handleClick}> {props.children} </a> </div> ) }
所以它們只是功能，對嗎？是的！由於它們只是函式，因此使用純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 (<span>{hours}</span>)
}const Minute = ({minutes}) => (<span>{minutes<10 && '0'}{minutes}</span>)
const Second = ({seconds}) => (<span>{seconds<10 && '0'}{seconds}</span>)
const Separator = ({separator}) => (<span>{separator || ':'}</span>)
const Ampm = ({hours}) => (<span>{hours >= 12 ? 'pm' : 'am'}</span>)
有了這些，我們可以放置單個元件，因為它們是完整的React元件（它們是）：
<div>Minute: <Minute minutes={12} /></div>
<div>Second: <Second seconds={51} /></div>
我們可以重構我們的時鐘元件來接受一個format字串並分解這個字串，只選擇我們使用者有興趣展示的元件。我們可以通過多種方式處理此問題，例如將邏輯強制轉換為Clock元件，或者我們可以建立另一個接受格式字串的無狀態元件。讓我們這樣做（更容易測試）：
const Formatter = (props) => {
let children = props.format.split('').map((e, idx) => {
if (e === 'h') {
return <Hour key={idx} {...props} />
} else if (e === 'm') {
return <Minute key={idx} {...props} />
} else if (e === 's') {
return <Second key={idx} {...props} />
} else if (e === 'p') {
return <Ampm key={idx} {...props} />
} else if (e === ' ') {
return <span key={idx}> </span>;
} else {
return <Separator key={idx} {...props} />
}
});
return <span>{children}</span>;
}這是一個有點醜陋與key和{...props}的thingie在那裡。React為我們提供了一些輔助工具，用於對映孩子並負責key通過React.Children物件處理每個孩子的唯一性。
由於元件可以大大簡化render()我們Clock元件的功能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 (
<div className='clock'>
<Formatter
{...this.props}
state={this.state}
hours={hour}
minutes={minute}
seconds={second}
/>
</div>
)
}
}
這不僅是我們的Clock成分多簡單，但它是如此更容易測試。這也將幫助我們過渡到使用資料狀態的樹，像流量/ Redux的框架，但更多的後來者。
呃......為什麼要關心？
在React中使用功能元件的優點是：
- 我們可以消除元件的繁重，沒有建構函式，狀態，生命週期的瘋狂等。
- 沒有
this關鍵字（即無需繫結） - 表示元件（也稱為啞元件）強調UI而不是業務邏輯（即元件中沒有狀態操作）
- 鼓勵構建更小，獨立的元件
- 突出寫得很糟糕的程式碼（為了更好的重構）
- 快速快速快速
- 它們易於重複使用
您可能會說為什麼不使用功能元件？那麼，使用功能元件的一些缺點是一些優點：
- 沒有生命週期回撥掛鉤
- 功能有限
- 沒有
this關鍵字
總的來說，嘗試使用功能元件而不是更重的React.Component表兄弟是一個非常好的主意。當我們談論React中的資料管理時，我們將看到如何將這些表示元件與資料一起使用props。
今天工作很好。我們今天成功實現了React排名。我們現在知道製作React元件的三種方法。
明天，我們將使用React團隊提供的包管理工具來構建/構建React應用程式：create-react-app。
學習REACT正確的方法
React和朋友的最新，深入，完整的指南。
下一章：
CREATE-反應應用內