摘要

• 這篇文章的目的是 ?
• React「渲染機制」分享
• 連結

這篇文章的目的是 ?

當我們深入了解 React 的渲染機制時，我們等於又掌握了這個 React 的另一個核心概念，它不僅讓我們的應用更快更順暢，還讓我們的開發更有效率。React 的虛擬 DOM、生命週期、事件處理等概念，直接影響了性能、代碼結構和使用者的體驗。這種深入理解讓我們能夠更好地優化應用，提高程式碼的品質，並提供出色的使用者體驗。無論您是新手還是有經驗的開發者，React 渲染機制都是值得投入時間學習的重要主題，它將使你成為一名更優秀的 React 開發者。

React「渲染機制」分享

1. Component Life Cycle（元件生命週期）：
   React 元件生命週期是指元件在被創建、更新和卸載時所經歷的一系列階段。這些階段包括 componentDidMount、componentDidUpdate、componentWillUnmount 等等。這些方法允許您在特定的階段執行程式碼，例如在元件被加載後或更新後。

   以 Class Component 為範例：

import React, { Component } from 'react';

class MyComponent extends Component {
  componentDidMount() {
    // 元件被加載後執行的程式碼
  }

  componentDidUpdate(prevProps, prevState) {
    // 元件更新後執行的程式碼
  }

  componentWillUnmount() {
    // 元件即將卸載前執行的程式碼
  }

  render() {
    return <div>我的React元件</div>;
  }
}

以 Functional Component 為範例：

import React, { useEffect } from 'react';

const MyComponent = () => {
  useEffect(() => {
    // 元件被加載後執行的程式碼
    return () => {
      // 元件即將卸載前執行的程式碼
    };
  }, []);

  return <div>我的React元件</div>;
}

1. Lists and Keys：
   在 React 中，您可以使用 JavaScript map function 來動態生成清單，並確保每個項目都有唯一的 key。這有助於 React 正確地識別和更新清單中的元素。

   import React from 'react';
   
   const MyList = () => {
     const items = ['項目1', '項目2', '項目3'];
   
     return (
       <div>
         {items.map((item, index) => (
           <div key={index}>{item}</div>
         ))}
       </div>
     );
   }
   

2. Render Props：
   渲染屬性是一種在 React 中共享程式碼的技巧，通過將一個函式作為元件的屬性，其他元件可以調用這個函式，並獲取需要的資料或邏輯。

   import React from 'react';
   
   const MouseTracker = ({ render }) => {
     return (
       <div onMouseMove={(event) => render(event)}>
         追蹤滑鼠位置
       </div>
     );
   }
   
   // 在其他地方使用 Render Props
   const App = () => {
     return (
       <MouseTracker
         render={(event) => (
           <div>滑鼠位置：{event.clientX}, {event.clientY}</div>
         )}
       />
     );
   }
   

3. Refs：
   Refs 允許你在 React 元件中直接訪問 DOM 元素或 React 元件實例。這在需要操控 DOM 或從子元件中訪問方法的情況下非常有用。

   import React, { useRef, useEffect } from 'react';
   
   const MyComponent = () => {
     const inputRef = useRef(null);
   
     useEffect(() => {
       // 存取 DOM 元素
       inputRef.current.focus();
     }, []);
   
     return <input ref={inputRef} />;
   }
   

4. Events：
   在 React 中，你可以使用事件處理函式來處理各種 DOM 事件，例如點擊、改變、提交等等。

   import React from 'react';
   
   const MyComponent = () => {
     function handleClick() {
       alert('按下了按鈕');
     }
   
     return <button onClick={handleClick}>點擊我</button>;
   }
   

5. Higher Order Components：
   高階元件是一種模式，它允許你重用元件邏輯並增強現有元件的功能。通過將一個元件傳遞給高階元件，你可以添加額外的行為或屬性。

   import React, { useEffect } from 'react';
   
   // 高階元件示例
   const withLogging = (WrappedComponent) => {
     return function EnhancedComponent(props) {
       useEffect(() => {
         console.log('元件已加載');
       }, []);
   
       return <WrappedComponent {...props} />;
     };
   }
   
   // 使用高階元件
   const MyComponent = () => {
     return <div>我的React元件</div>;
   }
   
   const EnhancedComponent = withLogging(MyComponent);
   

連結

• React：https://react.dev/