資訊專欄INFORMATION COLUMN
摘要：本文轉載自眾成翻譯譯者鏈接原文今天，我們將看看我們可以用于組件的一些最常見的生命周期鉤子函數，我們將討論為什么它們是有用的，什么時間應該用什么。我們使用的一個更常見的生命周期鉤子是鉤子。這些是我們可以在框架中進行交互的一些生命周期鉤子。
本文轉載自：眾成翻譯
譯者：iOSDevLog
鏈接：http://www.zcfy.cc/article/3827
原文：https://www.fullstackreact.com/30-days-of-react/day-7/
今天，我們將看看我們可以用于React組件的一些最常見的生命周期鉤子函數，我們將討論為什么它們是有用的，什么時間應該用什么。
恭喜！我們已經在React的第一周結束了，我們已經覆蓋了這么多的基礎知識。我們剛剛完成了處理有狀態的組件來跟蹤組件的內部狀態。今天，我們將暫停實施，并談一下應用中的組件_lives_。也就是說，我們將討論組件的生命周期。
由于React裝載了我們的應用，它為我們提供了一些鉤子，我們可以在組件生命周期的不同時間插入自己的功能。為了_hook into_到生命周期，我們需要在我們的組件上定義函數，每個鉤子在適當的時候對其進行調用。讓我們來看看第一個生命周期鉤子：
componentWillMount() / componentDidMount()當我們的應用中的一個頁面上定義了一個組件時，在定義虛擬節點時，我們不能立即依賴它在DOM中可用。相反，我們必須等到組件本身在瀏覽器中實際上是_mounted_。對于我們需要運行的功能，我們可以定義兩個不同的_hooks_（或函數）。在組件被裝載在頁面之前被調用的一個，在組件被裝載之后被調用的一個。
什么是 mounting?由于我們使用React定義了我們的DOM樹中的節點的virtual representation，我們實際上并沒有定義DOM節點。相反，我們正在建立一個內存視圖，React為我們維護和管理。當我們談論mounting時，我們談論的是將虛擬組件轉換為由React放置在DOM中的實際DOM元素的過程。
這對于諸如獲取數據來填充組件的事情非常有用。例如，假設我們想使用我們的活動跟蹤器來顯示github事件。只有當數據本身被渲染時，我們才想加載這些事件。
回想一下我們在我們的活動列表中定義了我們的Content 組件
class Content extends React.Component {
render() {
const {activities} = this.props; // ES6 destructuring
return (
{/* Timeline item */}
{activities.map((activity) => (
讓我們更新Content 組件，向github.com events api發出請求，并使用響應來顯示活動。 因此，我們需要更新對象的state 。
就像我們昨天做的那樣，我們通過在構造函數中將this.state 設置為一個對象來更新我們的組件為狀態
class Content extends React.Component {
constructor(props) {
super(props);
this.state = {
activities: []
}
}
// ...
}
現在，當組件本身準備裝載（或裝載之后）時，我們將要發出一個HTTP請求。通過在我們的組件中定義函數componentWillMount() （或componentDidMount()），React將在DOM中裝載該方法之前運行該方法。 這是我們添加 GET 請求的完美的地方。
讓我們更新content組件，并請求github api。 由于我們只想顯示一個小列表，我們來看最新的四個活動。
我們已經存儲了一個github數據的靜態JSON文件，我們將直接從源碼（我們將在幾天內使用AJAX請求）使用promises。 現在，讓我們重點介紹如何使用新的數據實現更新組件：
class Content extends React.Component {
// ...
componentWillMount() {
this.setState({activities: data});
}
// ...
}
請注意，我們沒有從我們的Content 組件更改任何內容，它正常工作了。
componentWillUpdate() / componentDidUpdate()有時我們會在更改實際呈現之前或之后更新我們組件的一些數據。 例如，假設當組件的屬性更改時，我們要調用一個函數來設置渲染或調用一個函數集。 componentWillUpdate() 方法是一個合理的鉤子來處理我們的組件進行更改（只要我們不調用this.setState() 來處理它，因為它會導致無限循環）。
由于我們真的不需要深入處理這個問題，所以我們不用擔心在這里設置一個例子，但是很高興知道它存在。 我們使用的一個更常見的生命周期鉤子是componentWillReceiveProps() 鉤子。
componentWillReceiveProps()當組件即將接收新的props時，React會調用一個方法。 這是當組件將要接收一組新的屬性時將被調用的第一種方法。 定義這種方法是尋找特定props 更新的好時機，因為它使我們有機會計算更改并更新組件的內部狀態。
這時我們可以根據新屬性更新我們的狀態。
這里要注意的一點是，即使componentWillReceiveProps() 方法被調用，props 的值可能沒有更改。 總是 檢查prop值的變化是一個好主意。
例如，讓我們添加一個_刷新_按鈕到我們的活動列表，以便我們的用戶可以請求重新請求github事件api。
我們將使用componentWillReceiveProps() 鉤子來要求組件重新加載它的數據。 由于我們的組件是有狀態的，我們將要使用新數據刷新此狀態，因此我們不能簡單地更新組件中的props 。 我們可以使用componentWillReceiveProps() 方法來_告訴_我們要刷新的組件。
我們在我們的包含元素上添加一個按鈕，該元素傳遞一個requestRefresh布爾屬性來告訴Content組件刷新。
class Container extends React.Component {
constructor(props) {
super(props);
this.state = {refreshing: false}
}
// Bound to the refresh button
refresh() {
this.setState({refreshing: true})
}
// Callback from the `Content` component
onComponentRefresh() {
this.setState({refreshing: false});
}
render() {
const {refreshing} = this.state;
return (
請注意，我們有一個新元素顯示元素的子元素。 這是一種允許我們圍繞一些內容添加CSS類的模式。
class Footer extends React.Component { render() { return ({this.props.children}) } }
使用這個新的prop（requestRefresh prop），當我們的state對象改變值時，我們可以更新activities。
class Content extends React.Component {
// ...
componentWillReceiveProps(nextProps) {
// Check to see if the requestRefresh prop has changed
if (nextProps.requestRefresh !== this.props.requestRefresh) {
this.setState({loading: true}, this.updateData);
}
}
// ...
}
componentWillUnmount()此演示使用JSON文件中的靜態數據，并在刷新時隨機挑選四個元素。 這被設置為simulate刷新。
在組件卸載之前，React將調用componentWillUnmount() 回調。 這是處理我們可能需要的任何清理事件的時候，例如清除超時，清除數據，斷開Websockets等。
例如，我們上次工作使用我們的時鐘組件，我們設置一個超時時間被稱為每秒鐘。 當組件準備卸載時，我們希望確保我們清除此超時，以便我們的JavaScript不會繼續為不存在的組件運行超時。
回想一下，我們構建的 timer 組件看起來像這樣：
import React from "react"
class Clock extends React.Component {
constructor(props) {
super(props);
this.state = this.getTime();
}
componentDidMount() {
this.setTimer();
}
setTimer() {
this.timeout = setTimeout(this.updateClock.bind(this), 1000);
}
updateClock() {
this.setState(this.getTime, this.setTimer);
}
getTime() {
const currentTime = new Date();
return {
hours: currentTime.getHours(),
minutes: currentTime.getMinutes(),
seconds: currentTime.getSeconds(),
ampm: currentTime.getHours() >= 12 ? "pm" : "am"
}
}
// ...
render() {
}
}
export default Clock
當我們的時鐘將被卸載時，我們將要清除我們在組件的setTimer() 函數中創建的超時。 添加componentWillUnmount() 函數負責這個必要的清理。
class Clock extends React.Component {
// ...
componentWillUnmount() {
if (this.timeout) {
clearTimeout(this.timeout);
}
}
// ...
}
這些是我們可以在React框架中進行交互的一些生命周期鉤子。 當我們構建我們的應用程序時，我們將會很多地使用這些應用，所以熟悉它們的方法是一個好主意，它們是如何存在，以及如何掛鉤組件的生命。
我們在這篇文章中介紹了一個新的概念，我們已經看到了：我們在一個要從子組件調用到它的父組件上添加了一個回調。 在下一節中，我們將介紹如何定義和記錄組件的prop API，以便在整個團隊和應用中共享組件時使用。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/84672.html
摘要：今天我們將討論創建組件的最終方案，即無狀態函數的純組件。今天我們正在研究一種處理提出的復雜數據的方法，稱為體系結構。第天部署介紹今天，我們將探討部署我們的應用所涉及的不同部分，以便外界可以使用我們的應用。 本文轉載自：眾成翻譯譯者：iOSDevLog鏈接：http://www.zcfy.cc/article/3758原文：https://www.fullstackreact.com/3...
摘要：今天我們將討論創建組件的最終方案，即無狀態函數的純組件。為了獲得更多的性能和簡單性，同樣允許我們使用正常的函數創建純粹的，無狀態的組件。在中，功能組件被稱為一個參數的類似于構造函數類，它們是它所調用的，以及組件樹的當前。 本文轉載自：眾成翻譯譯者：iOSDevLog鏈接：http://www.zcfy.cc/article/3819原文：https://www.fullstackrea...
摘要：無論何時狀態改變通過，組件將重新投遞。在調用函數之后，我們可以將第二個參數傳遞給函數，該函數將在狀態更新后保證被調用。今天，我們更新了我們的組件以使其處于狀態狀態，現在有必要處理如何使組件成為狀態。 本文轉載自：眾成翻譯譯者：iOSDevLog鏈接：http://www.zcfy.cc/article/3824原文：https://www.fullstackreact.com/30-d...
摘要：并總結經典面試題集各種算法和插件前端視頻源碼資源于一身的文檔，優化項目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快速搭建項目。 本文是關注微信小程序的開發和面試問題，由基礎到困難循序漸進，適合面試和開發小程序。并總結vue React html css js 經典面試題 集各種算法和插件、前端視頻源碼資源于一身的文檔，優化項目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快...
閱讀 671·2021-11-24 09:39
閱讀 2336·2021-11-22 13:54
閱讀 2207·2021-09-23 11:46
閱讀 3252·2019-08-30 15:55
閱讀 2687·2019-08-30 15:54
閱讀 2412·2019-08-30 14:18
閱讀 1552·2019-08-29 14:15
閱讀 2739·2019-08-29 13:49
