資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何在 ReactJS 中向類新增生命週期方法？
React 中的每個元件都具有包含多個階段的生命週期。程式設計師通常將此生命週期視為元件的“生命週期”。元件會經歷以下事件：掛載、更新、解除安裝和錯誤處理。掛載是指新增節點的過程，更新需要程式設計師修改和更改 DOM 中的這些節點。另一方面，解除安裝會刪除節點，錯誤處理跟蹤您的程式碼以確保其正常工作且沒有錯誤。
這些事件可以比作元件的誕生、發展和最終消亡。您可以在每個 React 生命週期的階段覆蓋多個生命週期方法，以便在流程中的特定點執行程式碼。考慮到這一點，讓我們闡明一下如何在 ReactJS 中向類元件新增上述生命週期方法。
React 生命週期方法的詳細見解
如您所知，掛載、更新和解除安裝是主要的 React 生命週期方法。每個階段使用的方法使在元件上執行常見操作變得更加簡單。React 開發人員可以使用基於類的元件直接從 React Component 擴充套件以訪問這些方法。
在 React 16.8 之前，管理生命週期事件最流行的方法需要 ES6 基於類的元件。換句話說，如果我們的程式碼已經使用函式式 React 元件編寫，則需要將其重寫為擴充套件 React.Component 幷包含特定渲染函式的類。
然後才能訪問三個最流行的生命週期方法：componentDidMount、componentDidUpdate 和 componentWillUnmount。
如何輕鬆使用本地狀態和額外功能？
為了在 React 中使用本地狀態以及額外功能，您首先需要將函式式元件轉換為類元件。
- 建立一個與同名 ES6 類擴充套件 React.Component 的類。
- 新增一個空的 render() 方法。
- 將函式體放在 render() 方法中。
- 用 this.props 替換 render() 體中的 props。
- 刪除任何剩餘的空函式宣告。
render() { return ( <div> <h1>Hello, world!</h1> <h2>It is {this.props.date.toLocaleTimeString()}.</h2> </div> ); }
React 元件 clock 的定義現在是一個類而不是函式。每次發生更新時，都會呼叫 render 方法，但只要
向類元件新增生命週期方法
對於包含大量元件的應用程式，釋放資源勢在必行。當時鍾首次顯示到 DOM 時，我們希望啟動一個計時器。React 中的術語是“掛載”。此外，一旦時鐘建立的 DOM 被刪除，我們希望重置該計時器。在 React 中，這被稱為“解除安裝”。
示例
import react from ‘react’; class Clock extends React.Component { constructor(props) { super(props); this.state = {date: new Date()}; } componentDidMount() { } componentWillUnmount() { } render() { return ( <div> <h1>Hello, world!</h1> <h2>It is {this.state.date.toLocaleTimeString()}.</h2> </div> ); } }
輸出
Hello, world! It is 10:27:03 AM.
成功渲染元件的輸出會呼叫特定函式。這是 componentDidMount() 函式。在此處插入一個計時器 -
componentDidMount() { this.timerID = setInterval( () => this.tick(), 1000 ); }
還可以手動向類元件中插入更多欄位。程式設計師通常在需要保留不屬於資料流的一部分的內容時執行此操作。儘管 ReactJS 本身設定了 this.state 和 this.props。這些還具有獨特的含義，例如計時器 ID。在生命週期函式 componentWillUnmount() 中，我們將停用計時器 -
componentWillUnmount() { clearInterval(this.timerID); }
Clock 元件將每秒執行一次我們將最後實現的 tick() 方法。它將使用 this。要對元件的本地狀態進行程式設計更新，請使用 setState() -
示例
class Clock extends React.Component { constructor(props) { super(props); this.state = {date: new Date()}; } componentDidMount() { this.timerID = setInterval( () => this.tick(), 1000 ); } componentWillUnmount() { clearInterval(this.timerID); } tick() { this.setState({ date: new Date() } ); } render() { return ( <div> <h1>Hello, world!</h1> <h2>It is {this.state.date.toLocaleTimeString()}.</h2> </div> ); } } const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<Clock/>);
輸出
Hello, world! It is 10:30:12 AM. //clock is ticking every second. The clock is now ticking every second.
正確使用狀態
您應該瞭解有關 setState() 的三個方面。
不要直接修改狀態
例如，這不會重新渲染元件 -
// Wrong this.state.comment = 'Hello'; Instead, use setState(): // Correct this.setState({comment: 'Hello'});
只有建構函式才能分配 this.state。
狀態更新可能是非同步的
您不應該使用 this.props 和 this.state 的值來確定下一個狀態，因為它們可能會非同步修改。例如，以下程式碼在更新計數器時將不適用 -
// Wrong this.setState({ counter: this.state.counter + this.props.increment, } );
相反，請參考 setState() 的其他版本並使用接受函式的那個。這是因為某些版本將函式視為需要修復的物件。前一個狀態將作為第一個引數傳遞給該方法，而應用更新時的 props 將作為第二個引數傳遞 -
// Correct this.setState((state, props) => ({ counter: state.counter + props.increment } ) );
儘管我們在上面的示例中使用了箭頭函式，但普通函式也可以工作 -
// Correct this.setState(function(state, props) { return { counter: state.counter + props.increment }; } );
狀態更新已合併
您的狀態可能包含許多獨立變數 -
constructor(props) { super(props); this.state = { posts: [], comments: [] }; }
之後，您可以使用不同的 setState() 呼叫分別更新每個變數 -
componentDidMount() { fetchPosts().then(response => { this.setState({ posts: response.posts } ); } ); fetchComments().then(response => { this.setState({ comments: response.comments } ); } ); }
this.setState(comments) 完全替換了 this.state.comments，但只進行表面合併，保留 this.state.posts 不變。
因此，狀態元件通常被認為是本地或包含的。除了擁有和控制它的元件之外，沒有其他元件可以訪問它。
底線
我們已經討論了您需要了解的所有內容，以便正確地向 React 中的類元件新增生命週期方法。由於程式碼和技術細節，許多程式設計師通常在執行相同操作時會遇到一些困難。因此，請確保正確遵循步驟並在執行命令之前交叉檢查您的程式碼。
209 次瀏覽
