其枫

前言 在一个页面中, 如果页面中某个元素的几何属性变了, 就会导致页面的重排重绘。如果一个页面元素或者结构十分简单的时候, 那么我们几乎可以不考虑由于重排重绘所消耗的时间。但是在一个复杂的页面中, 我

前言 虽然基于vite构建的项目非常的快, 但是如果想要将老的项目跑在vite上可能需要花费好多时间。因为不同的项目规范不一样, 比如有的react项目要求了必须使用.jsx 作为React语法糖文件

相信很多同学在刚刚开始编写React的代码的时候, 都会在构造器中使用 bind 方法去绑定函数。可能刚刚开始大多人会以为这是在React中特有的操作, 其实不然, 这其实是跟JS函数的执行原理有关。随着时间的推移, 我们以前的写法已经不需要手动把函数去 bind this了,…

在上一篇文章中, 我们基于DOM体系构建了超级玛丽, 那么在本篇文章中我们使用canvas对整个架构进行升级, 从而提升游戏的视觉体验。 有需要的同学可以查看源码学习. canvas标签可以让我们能够使用JavaScript在网页上绘制各种样式的图形。要访问实际的绘图接口, 首…

本文将会手把手带着大家完成一款别样的超级玛丽游戏。线上地址, 该游戏一共有5关, 欢迎在评论区说出你们完成前两关的总耗时吧哈哈 ~ 黑色的小方块代表的是玩家, 他的任务时收集关卡内所有的金币同时需要避开岩浆。当最后一个金币被收集到了之后, 这一关就通过了。 玩家通过键盘上下左右…

前言本文的例子都是经过实践后,总结的一些比较实用的技巧,如果疑惑或者错误,欢迎指正!thenby多重排序github地址场景:需要对数据进行多重排序当然如果单纯的从小大排序,在这里例子中还可以这么写:

在前面几篇文章中, 我们已经完成了组件的绘制以及事件的交互, 那么本篇文章就带着大家使用这个工具构建一个报表看板界面和一个表格查询界面。 从我们的组件库中拖取两个标签、两个输入框、一个按钮、一个图表控件, 并且按照合适的位置摆放好。 我们这里使用外部公开的API, 进行配置。 …

在一个典型的React应用中, 数据都是通过props属性自顶向下传递的, 也就是我们通常所说的父传子。但是在某些场景下(换肤), 很多底层的子组件都是需要接收来自于顶层组件的换肤属性, 这会让我们的代码中有很多显示传递props的地方。Context 提供了一种在组件之间共享…

在上一篇文章中, 我们的Topology支持UI组件的渲染, 因此在这一篇文章中, 我将会带着大家完成事件与图表组件交互。 组件之间的事件交互, 我们不采用直接赋值的方式, 而是采用通过Store来间接的完成这个操作。采用这种方式, 会让我们的逻辑变得很清晰, 并且数据的集中化…