新零售

后期部署

开发难点

接口统一管理

请求二次封装

服务器宝塔部署

项目规范配置

项目前期部署

点击组件可实现类似于vuekeep-alive缓存效果

点击组件切换页面将展示在页面头部标签

组件要用户在删除tag标签的时候同步删除已缓存的组件

需求

react运用react-activation组件缓存

结合ant-dnsign中的tag实现可选组件缓存

技术

问题：keep-alive结合tag组件同步组件要用户在删除tag标签的时候同步删除已缓存的组件

解决：将需要缓存的组件路由包裹上keep-alive标签实现加载缓存的效果，然后在app父组件当前获取我每次访问的的路由信息，将这个路由信息添加到提前定义的变量当中  在使用原生js的map循环将这个变量的每一个路由信息渲染tag标签  当我点击删除的时候 使用react-activation插件的删除属性同步删除的组件

难点

使用ant-design组件库中的Popover气泡卡片添加一个鼠标悬浮到上面可显示一个删除全部tag标签和一个删除除去当前标签的一个功能 进一步的提高用户的一个使用体验

优化

react运用react-activation结合tag可选组件缓存

在同一个列表中渲染成千上万条数据且为了用户体验，列表数据展示在用户眼前的时间必须进入1秒以内

虚拟列表的主要好处是能有效提升性能。当列表项很多时，一次性渲染所有项目会造成大量的DOM操作和大量的渲染时间，可能会导致页面卡顿或浏览器崩溃。而虚拟列表是动态渲染，只加载可视区域的项目，大大减少了DOM操作量和渲染时间。

性能优化

只渲染视图区域的节点，没有渲染的节点不会被加载到内存中，节省了大量内存。

节省内存

由于只加载可视区域的项目，所以滑动列表时会更流畅，无论列表多长，都能保持快速的响应时间。

流畅体验

虚拟列表不仅可用于长列表，还能用于网格、瀑布流等各种滚动场景。

扩展

虚拟列表

无限滚动为用户提供了顺畅的浏览体验，用户无需跳转页面或点击“加载更多”按钮就可以不断浏览内容。

用户体验

由于用户可以无限制地浏览，这可能会增加他们在页面上的停留时间，从而提高用户的参与度。

提高用户留存

对于移动设备用户来说，无限滚动更加直观且易于操作。用户只需简单滑动屏幕，就可以加载并查看更多的内容。

易于使用

：只加载需要显示的数据，减少了系统负载，节省了网络和内存资源。

提高性能

无限滚动允许网页在有限的空间中呈现无限的内容，这使用户在滚动中就能获取大量信息，而无需通过复杂的导航或翻页操作。

空间利用

无限滚动允许动态加载内容，即根据用户滚动到哪个内容区，就加载哪个内容区的数据。这种方式对于用户体验和服务器负载方面都有一定的优势。

动态加载

无限滚动

问题:虚拟滚动需要精确地计算每个列表项的高度和位置，以便仅加载和渲染可见部分。当列表项高度不一或动态改变时，这会变得更加复杂。

解决：ResizeObserver 是一个强大的 Web API，可以让我们在元素的尺寸变化时执行某些操作和调整。它提供了一种能力，让你能够观测到元素的宽度和高度的变化，包括元素的内容、边框、内边距、甚至是元素的盒模型。

复杂的计算

问题:持续地向列表中添加数据意味着需要持续地更新数据源。在无线滚动和虚拟列表的交汇点处理数据的同步和更新会变得稍微复杂。

解决：1.数据分页：一种常见的解决方式是将数据分割成“页”，每次只从服务器获取和处理一小部分数据。使用适当的分页大小，可以在加载新数据和节省内存之间找到平衡。

数据同步

问题：尤其在数据动态加载的情况下，当用户回到之前滚动过的位置时，可能需要重新载入数据，保持用户的滚动位置并处理可能存在的空白空间

解决：在进行事件监听的时候只有设置一个变量用于保存最大的滚动距离只有滚动距离大于这个最大滚动距离的时候才会触发 并替换之前的最大滚动记录

滚动位置的保持

将两者结合使用进一步提升用户的一个体验

添加节流限制在滚动监听时数据请求的次数

避免不必要的重新渲染 也是运用了组件缓存react-activation的应用

列表无限滚动结合虚拟列表

项目可被选中并拖动。被拖动的项目在移动时，应显示出相对于其它项目的位置

当项目被拖放时，列表应更新以反映新的顺序。在用户完成排序后，新的项目排序应被保存或用于更新数据

对于原生js需要一定的理解

对于css的样式把握和c3新增功能的样式过渡有一定理解

问题：拖动列表项目需要精确和快速的响应，否则用户体验会受到影响。

解决：1.采用ant-dnsign中的列表推拽组件2.你可以采用 React DnD(Drag and Drop)、react-beautiful-dnd 或者 SortableJS 这样的可拖动库来实现无痛的拖动效果。它们都为拖动创建了抽象，而你只需要对这些抽象设定相应的行为。

响应式交互

问题：拖动和重新排序会导致频繁的DOM操作，如果处理不当，可能会导致页面的性能降低。

解决：1.利用 CSS3 动画：相对于 JS 直接操作 DOM，CSS3 动画的性能更好，因为大部分 CSS3 动画可以直接由 GPU 加速。2.使用React.PureComponent 或 React.memo：React.PureComponent 和 React.memo 可以帮助避免无必要的渲染。当组件的 props 和状态都没有改变时，PureComponent 和 memo 会跳过渲染，从而提升性能。对于大列表项，这点尤其重要。

复杂的DOM操作

问题：如何设计拖动和放置的视觉反馈

解决：1.拖动反馈：当用户拖动某个元素时，需要对该元素进行视觉标识，让用户明显地知道他们正在拖动什么元素。这可以是改变元素的形状、颜色、透明度等。    2.放置位置反馈：当用户拖动元素到可以放置的区域时，应清晰地标示出该区域或目标元素的位置。比如改变区域的背景色或是描边。   3.放置后反馈：释放拖动元素后，元素应该有平滑的过渡效果，移动到应在的位置，而不是突然出现在新位置，这样用户才能知道他们的操作成功了。

设计拖放视觉效果

问题：在客户端和服务器之间保持数据同步，特别是在实时应用程序中，也是具有一定的挑战

解决：1.使用WebSocket：WebSocket允许在用户的浏览器和服务器之间建立一个持久的、双向的连接，可以实时发送和接收数据。2.使用sse：sse是一个单向通信的功能 服务器可以实时发送数据。

为每一条的数据增添一个用户排序的属性 在添加数据时是按照一个递增的顺序 当我们去实推拽功能之后 发起修改数据请求时只携带交换位置的两条数据即可 按照我们传过来的两条数据的唯一值_id交换他们的排序即可

当列表中拥有大量数据的时候那我们传递全部数据去后端修改浪费大量性能

列表拖拽排序

大文件需要被切成较小的片段进行上传，以避免一次性上传大文件导致的问题

文件切片

用户应能看到文件上传的进度，并知道预计剩余的上传时间

进度显示

如果上传过程中出现错误或用户取消上传，应能在下一次上传时自动恢复，继续上传剩余的文件片段。

断点续传

允许多个文件片段同时上传，以提高上传速度和效率。

并行上传

当上传同一个视频的时候实现秒传的效果

秒传

HTML5 提供的一种可以直接操作客户端（也就是你的电脑）文件的API，它可以用来读取文件内容及文件信息（名字，大小等）。

File API

HTML5提供的新对象，可以组合键值对来模拟一全的表单，然后使用 axios方法来发送表单数据。

FormData

用于处理HTTP请求的对象，用于发送文件片段。

axios

用于根据上传视频的内容生成哈希值

spark-md5

问题：切分文件需要考虑片段的大小等因素，不当的切片可能导致上传效率下降。

解决：片段的数量：切片数量过多意味着需要进行较多次的网络请求，而每次网络请求需要与服务器进行连接、断开等操作，这会消耗较多的时间。          片段的大小：片段越大，单次上传所需的时间越长，如果在上传过程中出现问题需要重传，传输的数据就会很大。但是片段过小，意味着需要更多的              网络请求，也会影响效率。          因此，在进行文件切片上传时，通常会根据实际网络状况和文件大小，选择适合的切片大小。服务器硬件条件，比如内存大小也会影响切片大小的选              择。一般来说，5MB - 10MB 作为一个分片是比较合理的选择。

问题：大文件上传更容易受到网络中断，延迟等问题的影响。

解决：这种情况下，我们可以采用分片上传和断点续传的策略制定解决方案，将大文件分割成多个小片，然后逐个上传，每上传完一片就将其信息记录下来，如果网络中断，可以从记录中找到已上传的文件片，然后继续上传未完成的片。

网络问题

在上传前对文件进行压缩，可以减少上传的数据量。

使用压缩算法

根据网络状况和服务器处理能力，动态调整切片的大小，可以帮助提高上传效率。

优化文件切片的大小

在后端文件合并的时候利用ffmpeg对视频的第一帧实行抽取 在前端渲染的时候首先渲染img而不是video优化性能

仿哔哩哔哩视频播放器

大文件上传

需要一种一致的方式来处理不同组件的增删改查行为。

在不破坏组件封装性的前提下，应用程序的不同部分应当可以共享这个状态的逻辑。

对于复杂的状态逻辑，需要代码复用来维护代码清晰度和开发效率。

使用React中的Hook，可以使得函数组件具有和类组件一样的状态和生命周期管理功能。在封装增删改查功能时，需要运用到useState和useEffect等hook。

问题：在多组件共享状态或者状态过于复杂的情况下，如何恰当的管理状态以及状态改变将是一大挑战。

解决：1.Context API: React 的 Context API 允许你在没有必要手动在各层级传递 props 的情况下，跨级共享某些状态。2.当项目逐渐复杂，可以考虑引入Redux等专业的状态管理库

状态管理

问题：在发出请求或者接收数据时，如何处理异步事件以及如何避免异步事件带来的bug可以是一大问题。

解决：1.Promise：Promise 是 JavaScript 中用于处理异步操作的对象，它可以用 then() 方法来指定异步操作成功时的回调函数，用 catch() 方法来指定异步操作失败时的回调函数。2.Async/Await：Async/Await 是 Promise 的语法糖，它使得编写异步代码变得更加清晰和简洁。

异步处理

问题：在处理增删改查功能时，如何优雅的处理错误，提供用户友好的提示将会是初学者面临的困难。

解决：使用 try…catch… 或者 Promise 的 catch 方法捕获和处理异步操作可能会抛出的错误。

错误处理

问题：在处理大量数据增删改查时，如何优化性能，减少不必要的渲染和计算，提高应用性能也是一个问题。

解决：1.使用虚拟列表或无限滚动：对于大量数据的展示，可以利用虚拟列表（例如 react-virtualized）或者无限滚动功能，只实际加载和渲染当前在视口中的部分元素。这大大减少了实际在 DOM 中的节点的数量。2.避免不必要的重新渲染 也是运用了组件缓存react-activation的应用

在发送请求时添加加载中动画，在请求失败时友好的提示用户。

提高用户体验

避免不必要的重新渲染 也是运用了组件缓存react-activation的应用

hook封装增删改查功能

对一些基础接口请求进行封装减少开发时产生的代码量

请求结果处理，当数据请求失败或者成功时，需要有相应的处理机制。

对于类封装的应用

对于后端的理解

问题： 调用远程或者本地服务器API时，经常会遇到跨域问题。

解决：1.CORS在后端配置CORS实现跨域操作   2.proxy代理可以在本地创建一个代理服务器，把对API的请求先发送到这个代理服务器，然后由代理服务器再向真正的服务器发送请求

跨域问题

问题：网络请求失败或者服务器错误都需要进行处理，如何有效的捕捉和处理错误是一个难点。

解决：1.用Axios的拦截器：当然你也可以使用axios提供的拦截器方法来进行全局的错误处理，原理是在做完请求后拦截response并对response做统一处理            2.检查HTTP状态码：服务器在响应请求时返回的状态码可以用来判断请求是否成功  3.捕获异常：通过使用 JavaScript 的 try-catch 语句。将可能出现       错误的代码放在 try 块中，错误处理代码放在 catch 块中

使用Promise、async/await等现代JavaScript设计模式来简化异步操作，

使用代理服务器解决跨域问题，或者在服务器端设置CORS。

对网络请求进行统一的错误拦截处理，对于返回状态非200的情况做统一处理，减少在每个请求中做错误处理的代码量。

本地服务器请求类封装

项目开发

新零售