两周一个小组件的List组件
前言两周一个组件的系列文章将介绍迷你版react组件的构建过程和一些心得。react组件mini版会参考社区优秀开源的Component库，了解其组件的实现原理，然后吸取其中的精华应用到我的react组件mini版中，实践一下（俗称作为制造轮子）。主要是想通过这种记录和分享的方式督促自己去了解和学习那些优秀的组件库的实现，通过造轮子来提升自己（我个人认为造轮子是一个很累但是收获很大的过程）。List组件的思考与准备让我们进入今天的主题：List组件的实现过程。实现这个组件的初衷是项目开发过程中有这样的需求。有一堆元素按一定方向排列，但容器空间不足，可以支持滚动显示多余的内容或者切换左右箭头显示多余的内容。然后经过一番了解，现有的组件库好像没有特别适合这个需求的组件，而且我觉得实现这个功能也不是很复杂，既然可以自己写一个，何乐而不为呢？？那是。.自己拿一个！首先是图片！来看看我们最终的实现效果：只需要几行代码就可以实现这个效果：{renderButton()}{renderCard()}{renderCardWithResize()}constrenderButton=()=>{constbuttonTextArr=Array.from({length:30},(v,k)=>`button${k+1}`)returnbuttonTextArr.map(item=>{item})}constrenderCard=()=>{constCardTextArr=Array.from({length:30},(v,k)=>`Card${k+1}`)returnCardTextArr.map(item=>{item}
)}constrenderCardWithResize=()=>{constCardTextArr=Array.from({length:7},(v,k)=>`Card${k+1}`)返回CardTextArr.map(item=>
{item} )}效果还不错！接下来，我们来看看如何实现这样一个迷你组件：首先，我们要明确组件的最终功能，也就是明确用途。在这里我希望迷你列表组件可以作为一个容器来包装任何长的内容它可以支持滚动和左右箭头之间的切换。总结起来就是三个功能点：支持滚动；元素全屏切换：点击切换按钮，实现全屏切换效果。监听容器大小变化，当空间足够充分显示和切换时，阻止滚动；并且作为容器，其内容的方向应该是可控的（即支持水平和垂直方向）。明确目标后，下一步就是找出技术难点，思考可行的技术方案。在这个列表组件中，如何实现内容的切换和滚动效果是难点之一，实现这种效果有3种可行的技术方案：通过控制css样式的left（top）属性，实现切换和模拟滚动；通过css3的transform属性实现切换和模拟滚动；使用原生的scroll事件和scrollto方法实现；最终，在这三种方案中，我更喜欢方案2，相比方案1，方案2采用的transform有比剩下更好的性能优势，而方案3会更多地依赖nativemethods，定制化少。方案确定后，如何实现？实现过程定义了一个容器元素，存储它的ref并取消它的滚动：.node-list{position:relative;溢出：隐藏；框大小：边框框；宽度：100%；height:100%;}
