Rendering in React (การเรนเดอร์ใน React)

1. Core Concepts

Virtual DOM

Virtual DOM เป็นแนวคิดหลักของ React ที่ช่วยเพิ่มประสิทธิภาพการอัปเดต UI โดยการสร้าง representation ของ DOM ในหน่วยความจำก่อน แล้วจึงอัปเดต DOM จริงเฉพาะส่วนที่เปลี่ยนแปลง

function App() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  );
}

Reconciliation

กระบวนการที่ React ใช้เปรียบเทียบ Virtual DOM เก่ากับใหม่ เพื่อหาว่าต้องอัปเดต DOM จริงส่วนใดบ้าง

// React จะทำการ reconcile เฉพาะส่วนที่เปลี่ยนเท่านั้น
function UserList({ users }) {
  return (
    <ul>
      {users.map(user => <UserItem key={user.id} user={user} />)}
    </ul>
  );
}

2. Rendering Patterns

Conditional Rendering

1. การใช้ if-else

การใช้ if-else เป็นวิธีพื้นฐานสำหรับการแสดงผลตามเงื่อนไข

function Greeting({ isLoggedIn }: { isLoggedIn: boolean }) {
  if (isLoggedIn) {
    return <h1>Welcome back!</h1>;
  } else {
    return <h1>Please sign in.</h1>;
  }
}

2. การใช้ Ternary Operator

Ternary Operator เหมาะสำหรับการแสดงผลแบบสั้นๆ ในบรรทัดเดียว

function UserStatus({ isOnline }: { isOnline: boolean }) {
  return (
    <div>
      User is {isOnline ? "Online" : "Offline"}
    </div>
  );
}

3. การใช้ Logical && Operator

การใช้ && Operator เหมาะสำหรับการแสดงผล Component เมื่อเงื่อนไขเป็นจริงเท่านั้น

function Notification({ hasUnread }: { hasUnread: boolean }) {
  return (
    <div>
      {hasUnread && <span className="badge">New</span>}
    </div>
  );
}

List Rendering

การ render list ใน React ใช้ method map() เพื่อแปลง array ของข้อมูลเป็น array ของ Component โดยต้องระบุ key ที่เป็น unique ให้แต่ละ element

function NumberList() {
  const numbers = [1, 2, 3, 4, 5];

  return (
    <ul>
      {numbers.map((number) => (
        <li key={number.toString()}>
          {number}
        </li>
      ))}
    </ul>
  );
}

3. Performance Optimization

React.memo

ช่วยป้องกันการเรนเดอร์ซ้ำเมื่อ props ไม่เปลี่ยนแปลง

const MemoComponent = React.memo(function MyComponent({ value }) {
  // เรนเดอร์เฉพาะเมื่อ props.value เปลี่ยน
  return <div>{value}</div>;
});

useMemo

ช่วยจำค่าที่คำนวณไว้เพื่อป้องกันการคำนวณซ้ำ

function ExpensiveComponent({ items }) {
  const sortedItems = useMemo(() => {
    return items.sort((a, b) => a.value - b.value);
  }, [items]);

  return <List items={sortedItems} />;
}

useCallback

ช่วยจำฟังก์ชันไว้เพื่อป้องกันการสร้างฟังก์ชันใหม่ทุกครั้งที่เรนเดอร์

function Parent() {
  const [count, setCount] = useState(0);

  const increment = useCallback(() => {
    setCount(c => c + 1);
  }, []);

  return <Child onClick={increment} />;
}

4. Advanced Techniques

Lazy Loading

const OtherComponent = React.lazy(() => import("./OtherComponent"));

function MyComponent() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <OtherComponent />
    </Suspense>
  );
}