前端精读周刊

今天我们看一道 leetcode hard 难度题目：二叉树中的最大路径和。 题目 二叉树中的 路径 被定义为一条节点序列，序列中每对相邻节点之间都存在一条边。同一个节点在一条路径序列中 至多出现一次

今天我们看一道 leetcode hard 难度题目：编辑距离。 题目 给你两个单词 word1 和 word2， 请返回将 word1 转换成 word2 所使用的最少操作数。 你可以对一个单词进行

最近数据可视化领域开源了一套 VisActor 方案，虽然刚开源没多久，但产品矩阵已经颇有特色，我们可以从中学习一下数据可视化领域是如何设计顶层架构的，以及对未来 3-5 年可视化领域的发展规划。

今天我们看一道 leetcode hard 难度题目：地下城游戏。 恶魔们抓住了公主并将她关在了地下城 dungeon 的 右下角 。地下城是由 m x n 个房间组成的二维网格。我们英勇的骑士最初被

今天我们看一道 leetcode hard 难度题目：最小覆盖子串。 题目 给你一个字符串 s 、一个字符串 t 。返回 s 中涵盖 t 所有字符的最小子串。如果 s 中不存在涵盖 t 所有字符的子串

今天我们看一道 leetcode hard 难度题目：统计可以被 K 整除的下标对数目。 题目 给你一个下标从 0 开始、长度为 n 的整数数组 nums 和一个整数 k ，返回满足下述条件的下标对

今天我们看一道 leetcode hard 难度题目：通配符匹配。 题目 给你一个输入字符串 (s) 和一个字符模式 (p) ，请你实现一个支持 '?' 和 '*' 匹配规则的通配符匹配。

自由布局吸附线的效果如下图所示： 那么如何实现吸附线呢？我们先归纳一下吸附线的特征： 正在拖动的 box 与其他 box 在水平或垂直位置距离接近时，会显示对齐线。

本篇精读来自笔者代码实践，没有原文出处请谅解。 早些我们介绍过了 磁贴布局 - 功能分析 与实现，现在我们来做一个更进一步的思考，如何让磁贴布局与自由布局混合实现？ 让磁贴布局与自由布局混合实现，从效

接下来用实战来说明该可视化搭建框架是否好用，以下几条原则需要始终贯穿在下面每个实战场景中： 复杂的业务场景，背后使用的框架 API 是简单的。 底层 API 并不为业务场景特殊编写，而是具有很强的抽象

性能在可视化搭建也是极为重要的，如何尽可能减少业务感知，最大程度的提升性能是关键。 其实声明式一定程度上可以说是牺牲了性能换来了可维护性，所以在一个完全声明式的框架下做性能优化还是非常有挑战的。

组件通过 <Canvas /> 渲染在画布上，内容完全由组件树 componentTree 驱动，但也有一些情况我们需要把某个组件实例渲染到组件树之外，比如全屏、置顶等场景，甚至有些时候我们要渲染一个

ChatPDF 最近比较火，上传 PDF 文件后，即可通过问答的方式让他帮你总结内容，比如让它帮你概括核心观点、询问问题，或者做观点判断。我们来看看背后的实现思路。

由于 React 的特点，组件改变所在父级后会产生 Remount，而在可视化搭建场景存在两个特点： 自由、磁贴、流式布局都可以通过拖拽轻松改变组件父元素。 大数据量下组件 Remount 的消耗不容

组件值校验，即在组件值变化时判断是否满足校验逻辑，若不满足校验逻辑，可以拿到校验错误信息进行错误提示或其他逻辑处理。 声明 valueValidator 可开启值校验： 如上面的例子，相当于对组件值做

虽然底层框架提供了通用的组件值与联动配置，可以建立对组件任意 props 的映射，但这只是一个能力，还不是协议。 业务层是可以确定一个协议的，还要让这个协议具有拓展性。 我们先从使用者角度设计 API

组件联动是指几个组件相互关联。也就是当一个组件状态变化时，其他组件可以响应。 组件联动是多对多关系的，且目的分为一次性与持续性： 多对多关系：即一个组件可以同时被多个组件联动；多个组件可以同时联动一个

可视化搭建会遇到如下三类容器组件： 简单容器：以 children 容纳子组件的容器。 卡片容器：以 props.header 加上 props.header 等多个插槽容纳子组件的容器。 Tab 容

在设计好画布与组件数据流体系后，理论上主体功能已经完成，但缺乏方便易用的 API，所以还需要内置一些状态与方法。 但是内置状态与方法必须寻求业务的最大公约数，极具抽象性，添加需慎重。 接下来我们从必须

接下来需要解决两个问题： 可视化搭建的其他业务元素如何与画布交互。比如拓展属性配置面板、图层列表、拖拽添加组件、定位锚点、主题等等。 runtimeProps 如何访问到当前组件实例的 props。