React 实用技能提高
文章平均质量分 61
以实战为背景,渐入React开发各个环节,掌握前端常用性能体验优化思路,提升代码编写能力及思维能力
码蚁先生
无个性,不签名
展开
-
React富文本编辑器开发(十三)序列化
Slate是一个用于编辑富文本内容的框架,它支持复杂的、嵌套的数据结构。为了确保编辑器的内容始终保持一致和有效,Slate提供了规范化()机制。规范化的目的是确保编辑器内容的形状符合特定的约束条件。Slate默认提供了一些内置约束,如确保元素节点包含至少一个文本后代、合并相邻的文本节点、块节点只包含特定类型的子节点等。开发人员可以根据特定的需求添加自定义约束,通过扩展编辑器上的函数来实现。此函数在插入或更新节点时被调用,允许开发人员检查和修复节点的状态以符合约束。规范化是一个多次执行的过程,每次调用。原创 2024-03-06 21:53:34 · 1098 阅读 · 0 评论 -
React富文本编辑器开发(十二)插件
由于内联样式优先于样式表,您使用样式表提供的样式将不会覆盖默认样式。文本级别的格式化的一个缺点是您不能保证任何给定格式是 “连续的” —— 也就是说它会作为一个单独的叶子保留。中渲染叶子是类似的——您不能保证即使一个单词具有一种格式,该叶子也是连续的,因为它取决于它与其他格式的重叠方式。它不会重新发明自己的视图层,您不必学习新的东西。除了插件函数之外,您可能还想公开与您的插件一起使用的辅助函数。允许您控制自定义节点和属性在您的富文本领域中的渲染行为。而不是样式表来提供您的样式,这样会覆盖默认的内联样式。原创 2024-03-06 21:52:36 · 1212 阅读 · 0 评论 -
React富文本编辑器开发(十一)命令与编辑器
..Editor,// ...},在编写自己的命令时,您经常会使用Slate提供的Transforms帮助程序。原创 2024-03-06 21:51:45 · 1156 阅读 · 0 评论 -
React富文本编辑器开发(十)变换
Slate的数据结构是不可变的,因此你不能直接修改或删除节点。相反,Slate带有一系列的 “transform” 函数,可实现更改编辑器的值的目的。Slate的变换函数被设计得非常灵活,可以表示可能需要对编辑器进行的各种更改。然而,这种灵活性一开始可能很难理解。通常,您将对零个或多个节点应用单个操作。例如,下面介绍如何通过非标准操作(或调试/跟踪哪些节点将受到一组节点选项的影响)可能需要使用来创建的JavaScript迭代器和for的循环来行动。原创 2024-03-06 08:33:10 · 1126 阅读 · 0 评论 -
React富文本编辑器开发(九)位置
位置是指在使用Slate编辑器中进行插入、删除或执行其它操作时引用文档中特定位置的方式。有几种不同类型的位置接口,每种接口都用于不同的用例。原创 2024-03-06 08:31:59 · 499 阅读 · 0 评论 -
React富文本编辑器开发(八)节点
节点,也就是Node, DOM树就是由节点组成的,leaf是节点, element也是节点,节点贯穿始终。EditortextSlate 文档是一种嵌套和递归结构。在文档中,元素可以有子节点,所有这些子节点都可以有子节点,没有限制。嵌套和递归结构使您能够对简单行为(如用户提及和主题标签)或复杂行为(如带有标题的表格和图形)进行建模。原创 2024-03-05 15:43:22 · 495 阅读 · 0 评论 -
React富文本编辑器开发(七)接口与辅助函数
然后把它们绑定的系统命名空间中去,以后使用就相当的方便了。原创 2024-03-05 11:24:05 · 864 阅读 · 2 评论 -
React富文本编辑器开发(六)
虽然现在我们的内容能够实时的保存,但是页面一刷新还是还原了,这是显而易见的,因为我们并没有在组件初始化时从我们的LocalStore中读取数据,所以就只显示初始变量中的内容。以现在我们所了解的内容而言,或许你发现了一个问题,就是我们的编辑器的内容如何保存的问题,数据的保存是最重要的一个环节,无法保存的数据意义不大。现在,相关的基础知识我们应该有个大概的了解了,但离我们真正的开发出一个实用型的组件还有一段距离,不过不用担心,我们离目标已经越来越近。上面的工具很简单,就是把所有的节点纯文本化。原创 2024-03-03 21:56:45 · 683 阅读 · 2 评论 -
React富文本编辑器开发(五)
这样代码也清爽了许多,功能我们也抽取出来了,这为我们日后的工具栏的设计创建了基础。了,下面我就形如进行这样的操作,把相关的可复用的命令操作抽取出来。事件里了,但如果我想复用相同的功能怎么办呢,最好的办法就是。到目前为止我们所有的功能操作都是直接写在。原创 2024-03-01 20:00:54 · 581 阅读 · 0 评论 -
React富文本编辑器开发(四)
通过前一章的内容得知,元素的渲染是通过渲染器来呈现的,块级元素通过指定。上一节我们做了块级元素的格式操作,这节我们来讲行内元素的相关操作。行内元素的样式一般指。也是元素,那么就要设计样式。时将所选择的内容变成粗体,修改。瞧,我们的功能越来越多是不是。创建一个新文件,将所有。我们再增加一个功能,当按。原创 2024-03-01 19:34:11 · 573 阅读 · 0 评论 -
React富文本编辑器开发(三)
现在我们的编辑器显示的内容很单一,这自然不是我们的目标,让呈现的内容多元化是我们的追求。这就需要让编辑器能够接收多元素的定义。从初始数据的定义我们可以推断数据的格式远不止一种,那么其它类型的数据如何定义及呈现的呢,我们新建一个文件。时光标所在的块应该会变成一个代码块。再次按一次时就变成普通的文本段落。元素,相反也能转化回默认元素。为了让两者的元素有较大的变化,我们对。现在新的要求来了,我们希望能动态的把选中的段落转换化。这个组件平常的不能再平常了。当然还要把这个渲染器指定给。原创 2024-03-01 16:18:04 · 872 阅读 · 0 评论 -
React富文本编辑器开发(二)
我们接着上一节的示例内容,现在有如下需求,我们希望当我们按下某个按键时编辑器有所反应。这就需要我们对编辑器添加事件功能。现在看控制台的打印结果,能捕获到每一次的按键值。当然这肯定不是我们想要的,我们想要的是有一个实用的功能。时就能看到界面上的变化了。原创 2024-03-01 14:46:54 · 840 阅读 · 0 评论 -
React富文本编辑器开发(一)
这是一个系统的完整的教程,每一节文章的内容都很重要。这个教程学完后自己可以开发出一个相当完美的富文本编辑器了。原创 2024-03-01 14:15:36 · 779 阅读 · 0 评论 -
React 模态框的设计(八)优化补充
在之前的弹窗的设计中,有两处地方现在做一点小小的优化,就是把。中的 onPointerEnter 事件 用。来规换,效果更佳,同样的,在。原创 2024-02-29 22:57:12 · 1180 阅读 · 0 评论 -
React 模态框的设计(七)整合与测试
一个弹窗是不是也挺复杂的,是的,往往看似简单的东西真正做起来很复杂。只有多试验才能出真知。光看不练肯定是不行的。下面我们来把前几节的内容整合一下就大功告成了。本示例中所有的引入目录的位置请根据自己的项目做适当的调整。本弹窗系列到此完结。相关的内容前几节已经讲得很通透了。原创 2024-02-29 15:12:58 · 727 阅读 · 0 评论 -
React 模态框的设计(六)Draggable的整合
前一节课中漏了一个知识点,当内容很长时需要滚动,这个滚动条是很影响美观的。在MacOS下的还能忍,win系统下简直不能看。如何让长内容能滚动又不显示滚动条呢,我尝试过很多办法,最终下面这个方法目前来说是最完美的。我们创建一个css文件。把它引入 到 ModelContent组件中就好了。目前我测试了Edge、Safari、Chrome三款浏览器,效果不错。其它的没有测试,不知道什么效果,欢迎大家告诉我。原创 2024-02-29 15:02:12 · 654 阅读 · 0 评论 -
React 模态框的设计(五)主体设计
弹窗的主体设计没什么特别,就是把细分化后的各个功能封装在一个个的小组件内,然后再整合。这样逻辑就分开了,不乱。原创 2024-02-29 13:52:47 · 887 阅读 · 0 评论 -
React 模态框的设计(四)状态管理
最近忙的不可开交,每天恨不得把时间掰开使用,挣不到钱还没时间,有时候我在想我怎么混得这个样子。题外话不多说,从这节课开始,我把这个模态框的教程写完整。请看效果:这个模态框功能相对比较完整,应该能满足大部分的使用场景了,相信看完这个系统的文章后,你应该就能开发出一个自己的模态框了。其实看似简单,其实比较复杂的,react有其天生的缺陷,如何绕开它的缺点,我们就要多思考,把React文档看透才行,多练习,多实践,多做笔记,这样我们才能少走弯路。原创 2024-02-29 13:23:11 · 1223 阅读 · 0 评论 -
React 模态框的设计(三)拖动组件的完善
组件的设计中给了一个简化的方法,今天我来完善一下这个组件,可用于任何可移动组件的包裹。这个优化中,增加了一个注目的效果,还增加了触发可拖动区域的指定功能,这样我们对可拖动组件有更大的自由掌控。这样就能判断当前鼠标是否处于指定的组件上并启动移动效果。由于我们要实现抓取注目动画和移动动画,都是通过。事件会触发拖动的移动效果。实现的,但是我们只要缩放动画,所以我用了两层。这样就有了开头的效果了。的情况下,可拖动组件中含有。指定的类名的子组件的。, 我来做个小组件测试。原创 2024-02-23 16:37:50 · 852 阅读 · 2 评论 -
React 模态框的设计(二)
自定义组件是每个前端开发者必备的技能。我们在使用现有框架时难免有一些超乎框架以处的特别的需求,比如关于弹窗,每个应用都会用到,但是有时我们使用的框架中提供的弹窗功能也是功能有限,无法满足我们的应用需求,今天 我来讲一下在React中如何自定义各种样式的弹窗。相信通过这篇文章,你能在自定义组件方面技能有一个质的提升。相关的知识能够掌握的更加牢固。先看最终的效果:首先本实例都是在MUI及基础上设计的,样式部分我使用了。原创 2024-02-22 16:27:45 · 750 阅读 · 0 评论 -
React 模态框的设计(一)拖动组件的设计
春节终结束了,忙得我头疼。终于有时间弄自己的东西了。今天来写一个关于拖动的实例讲解。先看效果:这是一个简单的组件设计,如果用原生的js设计就很简单,但在React中有些事件必须要多考虑一些。这是一个系列的文章,专门针对实际应用开发过程中的技术难点逐个讲解,相信大家能用得着。再次说明,我的示例都是基于MUI框架的,如果你不讲究样式的话,也可以直接采用原生dom的样式设计。关于项目的创建及MUI的应用请查看我以往的文章,都是详细的教程讲解。原创 2024-02-21 10:28:05 · 621 阅读 · 0 评论