这是我参与「第四届青训营」笔记创作活动的第10天,以下是我对如何web组件化的封装思考。

什么是组件化

组件化指的是包含一组html元素的集合，它可以看作是一组html元素的最小单位。

组件化的好处

降低阅读成本使得项目更容易被他人阅读
当追踪问题的时候，可以更快的定位
降低代码的维护难度，可以更好的添加新的功能

为什么要有组件化

web原生的html元素已经无法满足庞大的项目需求，代码臃肿无法分离
我们可以很轻松的把自己写好的组件作为一个单独的片段分享出去

如何使用组件化

组件化的误区

很多人明明知道可以通过组件化抽离代码，但往往只在需要复用的代码上进行抽离，没有从开发侧的视角进行分离（应当从一个从未接手过这个项目的人的角度考虑)。其实实现代码的复用，只是代码分离带来的好处，但不该作为是否抽离代码的标准。

组件化的开发

const index: React.FC<Props> = ({ isSmallWidth }) => {
    const [time, _setTime] = useState<number>(1500);
    const { isloading, BgUrl } = BGhooks(time);
    const { MusicUrl } = hookMusic();

    return (
        <div
            className={`${style.Onces}`}
            style={{ width: isSmallWidth ? "90vw" : "75vw" }}
        >
            <Content isloading={isloading} BgUrl={BgUrl} />
            <UpArrow isloading={isloading} />
            <AudioPlayer time={time} MusicUrl={MusicUrl} />
            <DownArrow isloading={isloading} />
            <Bgfilter BgUrl={BgUrl} isloading={isloading} time={time} />
        </div>
    );
};

以上代码就是我之前对组件化的封装考虑，可以看到我使用的是树状的层级组件封装，对于组件的认知还停留在组件是模块化的划分中。

<!--这里我使用了大量的插槽，是为了避免出现变量传递出现太大的层级深度
这里我抽离组件的依据是关注点分离，按照层级嵌套关系放置组件的位置固然可以
但我认为按照组件的显示的视图位置来确定层级更好 -->
<template>
    <div>
        <NavBarContainer>
            <NavBarList />
            <RightSideBar>
                <SearchAddItem :isHiddenWrap="isFoucsActiveWrap">
                    <SrearchBox :isFoucsActiveWrap="isFoucsActiveWrap" />
                    <GroupAdd :isHideWarp="isFoucsActiveWrap" />
                </SearchAddItem>
                <VipBox />
                <NotifyMessage />
                <AvatarBox />
            </RightSideBar>
        </NavBarContainer>
        <NavPageBar />
        <!--    路由出口 -->
        <slot />
    </div>
</template>

对比上下两处代码，我们发现下方代码的结构中使用了插槽的结构，把原本这种树状的层级组件，变为平级的组件,当然这是从组件的展示视角来看的。这样做最好的结果就是可以避免多层的单项数据流(一个变量被传递多层的问题)

我是如何思考组件封装的呢，我把组件分为容器组件和单例组件

容器组件就是负责规划内部元素布局的组件
单例组件就是只关注自己内部实现的组件

对于容器组件我们可以使用插槽留下一个自定义的空间，对于单例组件我们需要专注于其本身的功能实现

web组件化的封装思考 ｜ 青训营笔记