การแยกข้อกังวลด้วย React hooks

หากคุณเคยทำงานกับ React มาซักพักแล้ว คุณอาจจะเคยเจอ ภาชนะ และ ส่วนประกอบการนำเสนอ หรือส่วนประกอบที่ชาญฉลาดและโง่เขลา คำเหล่านี้อธิบาย a Belt hold ที่แบ่งชั้น UI ของส่วนประกอบ React ออกจากตรรกะ

การแยก UI ออกจากตรรกะทางธุรกิจนั้นไม่มีอะไรพิเศษใน React: การแยกข้อกังวลเป็นหลักการออกแบบที่มี มีอยู่แล้วในยุค 70. ตัวอย่างเช่น เป็นเรื่องปกติที่จะแยกรหัสที่เข้าถึงฐานข้อมูลออกจากตรรกะทางธุรกิจที่ส่วนหลัง

ดังนั้นใน React เราแก้ไขปัญหานี้ด้วยการสร้างส่วนประกอบคอนเทนเนอร์ที่มีตรรกะทั้งหมด ซึ่งจะส่งต่อข้อมูลผ่านอุปกรณ์ประกอบฉากไปยังองค์ประกอบการนำเสนอ

ด้วยการแนะนำ React hooks จึงมีแนวทางใหม่: การใช้ ตะขอที่กำหนดเอง.

เหตุใดเราจึงควรแยกตรรกะออกจากส่วนประกอบ

ก่อนที่เราจะเริ่มแยกตรรกะออกจากส่วนประกอบ React ของเรา เราควรทราบเหตุผลก่อน

การจัดระเบียบโค้ดของเราในลักษณะที่ทุกฟังก์ชันหรือส่วนประกอบมีหน้าที่เพียงสิ่งเดียวเท่านั้นที่มีข้อได้เปรียบมาก ง่ายต่อการเปลี่ยนและบำรุงรักษา (เดฟและแอนดรูว์เรียกสิ่งนี้ว่า “มุมฉาก” ในหนังสือของพวกเขา โปรแกรมเมอร์เชิงปฏิบัติ).

การใช้สิ่งนี้กับ React หมายความว่าส่วนประกอบของเราจะดูสะอาดตาและเป็นระเบียบมากขึ้น เราไม่จำเป็นต้องเลื่อนผ่านกำแพงแห่งตรรกะก่อนที่จะแก้ไข UI เป็นต้น

การจัดระเบียบโค้ดของคุณในลักษณะนี้ไม่เพียงแต่ทำให้การนำทางดูดีขึ้นและง่ายขึ้นเท่านั้น แต่ยังทำให้เปลี่ยนได้ง่ายขึ้นเนื่องจากการเปลี่ยนเบ็ดไม่ส่งผลต่อ UI และในทางกลับกัน

การทดสอบสามารถเข้าถึงได้มากขึ้นเช่นกัน: เราสามารถทดสอบตรรกะแยกจาก UI ได้หากต้องการ อย่างไรก็ตาม ข้อได้เปรียบที่สำคัญที่สุดสำหรับฉันคือวิธีการนี้จัดระเบียบโค้ดของฉัน

วิธีแยกลอจิกด้วย React hooks

เพื่อแยกตรรกะออกจากส่วนประกอบของเรา ก่อนอื่นเราจะสร้าง hook แบบกำหนดเอง

ลองใช้ส่วนประกอบนี้เป็นตัวอย่าง มันคำนวณค่าเลขชี้กำลังของเลขฐานและเลขชี้กำลัง:

คุณสามารถค้นหาซอร์สโค้ดที่สมบูรณ์ โปรดคลิกที่นี่เพื่ออ่านรายละเอียดเพิ่มเติม.

รหัสมีลักษณะดังนี้:

export const ExponentCalculator = () => {
  const [base, setBase] = useState(4);
  const [exponent, setExponent] = useState(4);
  const result = (base ** exponent).toFixed(2);

  const handleBaseChange = (e) => {
    e.preventDefault();
    setBase(e.target.value);
  };

  const handleExponentChange = (e) => {
    e.preventDefault();
    setExponent(e.target.value);
  };

  return (
    <div className="blue-wrapper">
      <input
        type="number"
        className="base"
        onChange={handleBaseChange}
        placeholder="Base"
        value={base}
      />
      <input
        type="number"
        className="exponent"
        onChange={handleExponentChange}
        placeholder="Exp."
        value={exponent}
      />
      <h1 className="result">{result}</h1>
    </div>
  );
};

นี้อาจดูดีอยู่แล้ว แต่เพื่อประโยชน์ของบทช่วยสอนนี้เพียง ภาพ ว่ามีเหตุผลมากกว่านี้

ขั้นแรกเราจะ ย้ายตรรกะไปที่ hook ที่กำหนดเอง และเรียกมันว่าภายในองค์ประกอบของเรา

const useExponentCalculator = () => {
  const [base, setBase] = useState(4);
  const [exponent, setExponent] = useState(4);
  const result = (base ** exponent).toFixed(2);

  const handleBaseChange = (e) => {
    e.preventDefault();
    setBase(e.target.value);
  };

  const handleExponentChange = (e) => {
    e.preventDefault();
    setExponent(e.target.value);
  };

  return {
    base,
    exponent,
    result,
    handleBaseChange,
    handleExponentChange,
  };
};

export const ExponentCalculator = () => {
  const {
    base,
    exponent,
    result,
    handleExponentChange,
    handleBaseChange,
  } = useExponentCalculator();

  // ...
};

เราสามารถย้ายเบ็ดนี้ไปที่ a แยกไฟล์ สำหรับการแยกข้อกังวลที่ชัดเจนยิ่งขึ้น

นอกจากนี้ เราสามารถแยก hook ของเราออกเป็นฟังก์ชันที่เล็กกว่าและใช้ซ้ำได้ ในกรณีนี้ ทำได้แค่สกัด calculateExponent.

ใช้ExponentCalculator.js

const calculateExponent = (base, exponent) => base ** exponent;

const useExponentCalculator = () => {
  const [base, setBase] = useState(4);
  const [exponent, setExponent] = useState(4);
  const result = calculateExponent(base, exponent).toFixed(2);

  // ...
};

การทดสอบฟังก์ชันเหล่านี้ง่ายกว่าการทดสอบโค้ดของส่วนประกอบทั้งหมดจากตัวอย่างแรก เราสามารถทดสอบมันด้วยไลบรารีการทดสอบ Node.js ใดๆ ก็ได้ ซึ่งไม่จำเป็นต้องรองรับส่วนประกอบ React ด้วยซ้ำ

ตอนนี้เรามีโค้ดเฉพาะเฟรมเวิร์ก (React) ในโค้ดสำหรับส่วนประกอบและ hook ในขณะที่ตรรกะทางธุรกิจของเราอยู่ในฟังก์ชันต่างๆ ที่เรากำหนดไว้ในภายหลัง (ซึ่งเป็นเฟรมเวิร์กที่ไม่เชื่อเรื่องพระเจ้า)

ปฏิบัติที่ดีที่สุด

การตั้งชื่อ

ฉันชอบตั้งชื่อ hooks ที่กำหนดเองของฉันหลังจากส่วนประกอบเป็นการต่อกันของ use และชื่อส่วนประกอบ (เช่น useExponentCalculator). จากนั้นฉันก็เรียก ไฟล์เดียวกัน เป็นตะขอ

คุณอาจต้องการทำตามแบบแผนการตั้งชื่อที่แตกต่างกัน แต่ฉันแนะนำ คงเส้นคงวา ในโครงการของคุณ

หากฉันสามารถนำส่วนต่างๆ ของ hook ที่กำหนดเองมาใช้ซ้ำได้ ฉันมักจะย้ายไปที่ไฟล์อื่นภายใต้ src/hooks.

อย่าหักโหมจนเกินไป

พยายามที่จะปฏิบัติ หากส่วนประกอบมี JS เพียงไม่กี่บรรทัด ก็ไม่จำเป็นต้องแยกตรรกะ

CSS ใน JS

หากคุณกำลังใช้ไลบรารี CSS-in-JS (useStyles) คุณอาจต้องการย้ายรหัสนี้ไปยังไฟล์อื่นด้วย

คุณสามารถย้ายไปยังไฟล์เดียวกับ hook อย่างไรก็ตาม ฉันชอบที่จะเก็บไว้เหนือคอมโพเนนต์ในไฟล์เดียวกัน หรือย้ายไปยังไฟล์ของตัวเองหากไฟล์มีขนาดใหญ่เกินไป

สรุป

ไม่ว่าคุณจะคิดว่าการใช้ hooks แบบกำหนดเองจะปรับปรุงโค้ดของคุณหรือไม่ ท้ายที่สุดก็ขึ้นอยู่กับความชอบส่วนบุคคล หาก codebase ของคุณไม่มีตรรกะมากนัก ข้อดีของรูปแบบนี้จะไม่เกี่ยวข้องกับคุณมากเกินไป

ขอเกี่ยวแบบกำหนดเองเป็นเพียงวิธีเดียวในการเพิ่มโมดูลาร์ ฉันขอแนะนำอย่างยิ่ง แยกส่วนประกอบและฟังก์ชันออกเป็นชิ้นเล็กๆ ที่นำกลับมาใช้ใหม่ได้ เมื่อเป็นไปได้.

หัวข้อนี้ยังกล่าวถึงในระดับทั่วไปมากขึ้นใน โปรแกรมเมอร์เชิงปฏิบัติ. ฉันเขียนบทความเกี่ยวกับหัวข้อที่ฉันชอบในหนังสือเล่มนี้ ดังนั้นหากคุณสนใจ โปรดอย่าลืม ตรวจสอบว่า.