我的 React 之旅：第 26 天

生命週期方法與條件渲染

今天標誌著我的 React 學習之旅又邁出了一步，這一切都是關於生命週期方法和條件渲染的。了解 React 元件是如何誕生、成長並最終離開 DOM 對我來說是一個改變遊戲規則的事情。除此之外，還能夠根據用戶互動有條件地顯示內容，突然之間，建立動態的、用戶友好的應用程式感覺非常甜蜜！

React 函數式元件中的生命週期方法
生命週期有 3 個步驟：

1.初步步驟（安裝階段）：

• 元件第一次渲染時發生。
• 具有空依賴數組 ([]) 的 useEffect 僅在此階段運行。 範例：

useEffect(() => {
  console.log("Component mounted");
}, []);

2.更新步驟：

• 當狀態或道具改變時觸發。
• React 重新運行你的函數元件，重新計算狀態並傳遞更新的 props。
• 使用具有特定相依性的 useEffect 來處理變更：

useEffect(() => {
  console.log("State or props updated!");
}, [dependency1, dependency2]);

3。退出/卸載階段：

• 當組件從 DOM 移除時發生。
• 可以在useEffect的回傳函數中加入清理程式碼來釋放記憶體。 範例：

useEffect(() => {
  const handleResize = () => console.log("Resized!");
  window.addEventListener("resize", handleResize);

  return () => {
    window.removeEventListener("resize", handleResize);
    console.log("Component unmounted, cleanup done!");
  };
}, []);

條件渲染

此技術對於根據條件動態渲染元件或元素至關重要。

三元運算子
使用者問候語範例:

return props.isLoggedIn ? (
  <h2 className='welcome-message'>Welcome {props.username}</h2>
) : (
  <h2 className='login-prompt'>Please log in to continue</h2>
);

短路評估
對於更簡單的條件，您可以僅在條件為真時使用 && 來渲染元件：

return props.isLoggedIn && <h2>Welcome, {props.username}</h2>;

內聯條件樣式
您也可以動態設定組件的樣式：

const messageStyle = props.isLoggedIn
  ？ { 顏色：「綠色」 }
  ：{顏色：「紅色」}；

返回<h2>



</h2><p><em>一切都在一天比一天好</em></p>


          

            
        

以上是我的 React 之旅：第 26 天的詳細內容。更多資訊請關注PHP中文網其他相關文章！