รูปแบบ Context Selector

ยินดีต้อนรับ

ปัญหาของตัวเลือก

ตัวเลือกคืออะไร

ฮุกตัวเลือกแบบง่าย

function useAppSelector(selector) {
  const state = useContext(AppCtx);
  return useMemo(() => selector(state), [state, selector]);
}

// Consumer only re-renders when user.name changes
const name = useAppSelector(s => s.user.name);

การตรวจสอบความเท่ากันแบบตื้น

import { useRef } from 'react';

function useSelector(selector) {
  const state = useContext(AppCtx);
  const selected = selector(state);
  const ref = useRef(selected);
  if (!shallowEqual(ref.current, selected)) {
    ref.current = selected;
  }
  return ref.current;
}

ไลบรารีตัวเลือกบริบท

import { useContextSelector } from 'use-context-selector';

const name = useContextSelector(AppCtx, s => s.user.name);

Zustand เป็นโซลูชันที่มีตัวเลือกในตัว

const name = useAppStore(state => state.user.name);

เมื่อตัวเลือกซับซ้อนเกินความจำเป็น

การจดจำค่าฟังก์ชันตัวเลือก

// Outside component — stable reference
const selectName = s => s.user.name;

function Profile() {
  const name = useAppSelector(selectName);
  return <p>{name}</p>;
}

ตัวเลือกที่คำนวณต่อเนื่อง

const selectFullName = s => s.user.firstName + ' ' + s.user.lastName;

ตรวจสอบอย่างรวดเร็ว

สรุปทบทวน

บทเรียนถัดไป