ฉันควรห่อส่วนประกอบทั้งหมดด้วย React.memo () หากไม่ได้คาดหวังอุปกรณ์ประกอบฉากใด ๆ

Aug 18 2020

แม้ว่าจะเห็นได้ชัดว่าทำไมReactไม่ทำ React.memo ให้กับส่วนประกอบการทำงานทั้งหมดตามค่าเริ่มต้นและเราควรห่อส่วนประกอบที่ใช้งานได้ตามต้องการและเมื่อจำเป็น

ในกรณีของฉันฉันมีโครงการตอบโต้ขนาดใหญ่ที่มีโครงสร้างดังนี้:

const MyBigApp = () => {
  const shouldShowX = useSelector(getShouldShowX);
  const shouldShowY = useSelector(getShouldShowY);
  // Many more selectors

  return (
    <>
      {shouldShowX && <ComplexComponentX />}
      {shouldShowY && <ComplexComponentY />}
      {/* many more components based on different selectors like above */}
   </>
  );
};

ตรรกะทางธุรกิจทั้งหมดของฉันอยู่ใน redux และส่วนประกอบต่างๆใช้useSelectorภายในเพื่อรับข้อมูลจากร้านค้า

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

ก่อนหน้านี้connectเราได้รับส่วนประกอบที่บันทึกไว้โดยอัตโนมัติซึ่งเปรียบเทียบอุปกรณ์ประกอบฉากที่กำหนดเองและค่าที่จัดเก็บที่ส่งผ่านเป็นอุปกรณ์ประกอบฉากไปยังส่วนประกอบดังนั้นตอนนี้เราควรทำด้วยตนเองเสมอReact.memoในขณะที่ใช้useSelectorในส่วนประกอบที่ไม่ได้รับอุปกรณ์ประกอบฉากหรือไม่?

คำตอบ

1 BryanDowning Aug 18 2020 at 06:08

ฉันขอโต้แย้งว่าคุณควรพิจารณาใช้React.memoสำหรับส่วนประกอบย่อยที่ไม่ยอมรับอุปกรณ์ประกอบฉากใด ๆ ฉันขอแนะนำบทความนี้:https://dmitripavlutin.com/use-react-memo-wisely/

2.1 การแสดงผลคอมโพเนนต์มักใช้อุปกรณ์ประกอบฉากเดียวกัน
กรณีที่ดีที่สุดของการตัดองค์ประกอบใน React.memo () คือเมื่อคุณคาดหวังว่าส่วนประกอบที่ใช้งานได้จะแสดงผลบ่อยครั้งและโดยปกติจะใช้อุปกรณ์ประกอบฉากเดียวกัน

เนื่องจากส่วนประกอบที่คุณถามเกี่ยวกับไม่ยอมรับอุปกรณ์ประกอบฉากใด ๆ นั่นหมายความว่าอุปกรณ์ประกอบฉากจะไม่มีวันเปลี่ยนแปลง ดังนั้นจึงเป็นเหตุผลว่าการใช้React.memo อาจหลีกเลี่ยงรอบการแสดงผล สังเกตข้อแม้ที่สำคัญนี้จากบทความเดียวกัน: