React组件封装实践：如何拆解复杂的页面

• 如果是某一个业务概念比较复杂造成的大量 if-else 嵌套，使用策略模式重构；

• 如果是多个业务概念交织造成的复杂度，则用责任链模式梳理好每个层次；

• 如果是更高的抽象层次，比如不同的业务身份有不同的执行链路，或者不同的业务身份都要做某件事但做法不同，那么最好使用模板方法设计模式定义好高层次的业务抽象和默认逻辑，不同的业务身份进行选择性的重写或业务逻辑扩展。

• 基础组件：具有一定业务属性的小型组件单元。它有业务属性，但比较弱，强调通用性。

• 区块组件：业务知识较重的大组件。它内聚了很多业务知识，通用性弱，甚至可以没有通用性，强调业务的内聚性。

AliTalk IM 组件定义

type ChatProps = {  uid?: string;};const Chat: FC<ChatProps> = (data: ChatProps) => {  const [showChat, setShowChat] = useState(true);  useEffect(() => {    console.log('init Alitalk: ' + data.uid);    return () => {      console.log('destroy Alitalk: ' + data.uid);      setShowChat(false);
      const aliTalkMessageBox = document.getElementsByClassName('weblite-iframe');      for (let i = 0; i < aliTalkMessageBox.length; i++) {        const item = aliTalkMessageBox[i];        item.remove();      }    };  }, []);
  return (    <div>      {showChat && (        <Alitalk uid={data.uid} pid={'xx'} bizType={1} bizId={'xx'} >          <img width={24} height={24}            src={              'https://img.alicdn.com/imgextra/i2/O1CN01acXzMG1d5JsurHGVR_!!6000000003684-2-tps-200-200.png'            }  />          <span style={{ marginLeft: '5px', color: '#FF6600' }}>chat now</span>        </Alitalk>      )}    </div>  );};export default Chat;

AliTalk IM 组件定义组件引用

<Descriptions style={{ marginBottom: 24 }} title="买家信息">      <Descriptions.Item label="买家旺旺">            <Chat uid={detailData?.data?.buyerAliTalkId} />      </Descriptions.Item></Descriptions>

弹窗组件定义

弹窗组件引用

<Fragment>    <Button.Group>        <EstimatedQuotationModalForm orderId={detailData?.id} />
        <DomesticWarehouseReceivingModalForm orderId={detailData?.id} />
        <OfficialQuotationModalForm orderId={detailData?.id} />
        <MarkOrderPaidModalForm orderId={detailData?.id} />
        <MarkOrderExceptionModalForm orderId={detailData?.id} />
        <MarkOrderClosedModalForm orderId={detailData?.id} />
        {/* 移交服务单 ModalForm */}        <TransferOrderModalForm orderId={detailData?.id} />     </Button.Group></Fragment>

按照组件拆分后，主页面的代码行数从几千行降低到 200 行，主页面仅仅只做了对其他组件的引用和页面编排，其引用的业务区块组件如果够复杂，还能继续再次拆分组件，整个页面就成了一个挂载的组件树，但每个区块都只关心自己的业务抽象层次，符合 SLAP 原则。